I want to create a tab in vuejs but all i get is an error, Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I have already import all needed components including the tab component but still get the error.
Any help will be appreciated
Profile Component
<template>
<layout>
<div class="mt-4 md:mt-10">
<div class="mx-auto px-3 sm:px-6 xl:px-16">
<div class="flex flex-wrap justify-between">
<div class="md:w-2/6 lg:w-1/5 w-full mb-6 lg:mb-0 lg:block md:order-last lg:order-none">
<div class="bg-white rounded shadow">
</div>
</div>
</div>
<div>
<div class="text-center justify-center flex-col">
<div class="border-t border-b flex justify-center items-center">
<p class="px-3 py-1 flex-col">
<span class="font-bold text-sm">543</span>
<span class="text-gray-500 text-xs">Posts</span>
</p>
<p class="px-3 border-l py-1 flex-col">
<span class="font-bold text-sm">436</span>
<span class="text-gray-500 text-xs">Following</span>
</p>
</div>
</div>
</div>
</div>
<div class="p-4 bg-white shadow mt-4">
<div class="flex items-center">
<i data-feather="map-pin" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800">Lagos, Nigeria</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="calendar" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800">Joined, January 2018</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="link" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800 hover:underline">https://twingle.io</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="globe" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800 hover:underline">https://omike.me</span>
</div>
</div>
<div class="p-4 bg-white shadow mt-4">
<div>
<p class="font-bold">My Skills</p>
</div>
<div class="mt-3">
<ul class="inline">
<li class="inline mr-2">Javascript</li>·
<li class="inline mr-2">PHP</li>·
<li class="inline mr-2">Laravel</li>·
<li class="inline mr-2">NodeJS</li>·
<li class="inline">VueJS</li>
</ul>
</div>
</div>
</div>
<div class="w-full md:w-3/7 lg:w-1/2">
<tabs>
<tab name="Services" :selected="true">
<h1>What we do</h1>
</tab>
<tab name="Pricing">
<h1>How much we do it for</h1>
</tab>
<tab name="About Us">
<h1>Why we do it</h1>
</tab>
</tabs>
</div>
<div class="hidden lg:block md:w-2/6 lg:w-1/4">
<Info/>
</div>
</div>
</div>
</div>
</layout>
</template>
<script>
import Info from '#/Shared/Info'
import Layout from '#/Shared/Layout'
import UserFeed from '#/Components/User/UserFeed'
import Tabs from '#/Components/Tabs'
export default {
components:{
Info,
UserFeed,
Layout,
Tabs,
},
}
</script>
Tabs Component
<template>
<div>
<div class="bg-white shadow rounded px-4 mb-6">
<ul class="list-reset flex pro-tab">
<li class="pro-tab-active py-2">Posts</li>
<li class="ml-6 py-2">Achievements</li>
<li class="ml-6 py-2 hidden sm:block">Activities</li>
</ul>
</div>
<div class="tab-details">
<slot></slot>
</div>
</div>
</template>
<script>
import Tab from '#/components/Tab'
export default {
component:{Tab},
mounted(){
console.log(this.$children);
}
}
</script>
<style>
</style>
Tab Component
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Try adding the Tab component to the ProfileComponent:
components:{
Info,
UserFeed,
Layout,
Tabs,
Tab
},
Even though you've already added it to the Tabs components object, that's not accessible to the template processor when parsing the ProfileComponent, which is where Tab appears. You should also be able to remove the import from the Tabs component.
Related
How do I hide my page "section" when I click on a button. and show it another button is clicked
Here's my code
import './App.css';
import Typed from 'react-typed';
import { useState, useEffect } from 'react';
function App() {
return (
<div className='text-white'>
<div id='index' className='index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<div className='flex justify-center items-center'>
<h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Roll</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
strings={['simply', 'design']}
typeSpeed={70}
backSpeed={100}
loop/>
</div>
<p className='md:text-3xl sm:text-2xl text-xl font-bold py-4 '>best <a className='underline text-gray-300'>design</a> and <a className='underline text-gray-300'>simplistic.</a></p>
<button className='bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110 '>Create</button>//clicking this button will show the div below which has the id of info and hide this current div
</div>
<div id='info' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<h1>Hello</h1>
</div>
<div id='ino' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<h1>Hello</h1>
</div>
</div>
);
}
how do i make the onClick event work it out?
Just set a state let's call it for example hide and set default value false, and on the button click turn it to true.
And you can conditionally hide the button section and show the info section.
import "./App.css";
import Typed from "react-typed";
import { useState, useEffect } from "react";
function App() {
const [hide, setHide] = useState(false);
return (
<div className="text-white">
{!hide ? (
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Roll
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
strings={["simply", "design"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
best <a className="underline text-gray-300">design</a> and{" "}
<a className="underline text-gray-300">simplistic.</a>
</p>
<button
className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110"
onClick={() => setHide(true)}
>
Create
</button>
//clicking this button will show the div below which has the id of
info and hide this current div
</div>
) : (
<div
id="info"
className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<h1>Hello</h1>
</div>
)}
<div
id="ino"
className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<h1>Hello</h1>
</div>
</div>
);
}
You should use useState() react hook.
For example:
import './App.css';
function App() {
const [visible, setVisible] = useState(true);
return (
<div className='text-white' style={{display: visible ? 'block' : 'none'}}>
<div>
<!--first part-->
<div className='flex justify-center items-center'>
<h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Web</h1>
<!--stuff here-->
</div>
<p>stuff here</p>
<button onClick={() => setVisible(!visible)}>Create</button>
<!--when i click on the button it will hide the first part(section) and show the second part -->
</div>
<!--first part end -->
<div>
<!--second part -->
<h1>Hello</h1>
</div>
</div>
);
You could check more details how to use useState() hook here https://reactjs.org/docs/hooks-state.html
I'm working on a Vue3 project, for my needs the "aos" library was suitable, nevertheless I'm having issues with the implementation, practically all the HTML el in which I declare: data-aos="fade-up"( just an example ) => end up fading. I saw the exact moment when it slowly fades.
It's strange becauuse in my Hero Image the and the below work correctly:
<template #title
><h1
class="text-3xl w-full font-bold text-white sm:text-6xl sm:w-screen"
data-aos="fade-up"
data-aos-duration="1000"
>
{{ t('homeHero.title') }}
</h1></template
>
<template #subtitle
><p
class="w-full mt-4 sm:leading-relaxed text-white sm:text-xl sm:w-screen"
data-aos="fade-up"
data-aos-duration="1000"
>
{{ t('homeHero.desc') }}
</p></template
>
But, if i do the exact same in a button el below:
<a
class="block w-full px-8 py-3 text-md font-medium text-white rounded-xl shadow bg-accent sm:w-auto focus:outline-none focus:ring"
:href="`${appDomain}`"
data-aos="fade-up"
data-aos-duration="1000"
>
{{ t('homeHero.buttons.join') }}
</a>
It just dont work.
And I already tried these 2 ways of init.
on my main.ts:
const app = createApp({
render: () => h(App),
mounted() {
AOS.init()
}
})
and like this:
Home.vue
onMounted(() => {
AOS.init()
AOS.refresh()
})
this is the Hero Component, which contains both elements, h1, p, and button..
<template>
<section class="relative bg-black">
<slot name="img" />
<div
class="hidden sm:block sm:inset-0 sm:absolute sm:bg-gradient-to-r sm:from-black sm:to-transparent"
></div>
<div
class="relative max-w-screen-xl px-4 py-32 mx-auto lg:h-screen lg:items-center lg:flex"
>
<div class="max-w-xl text-center flex flex-col self-end sm:text-left">
<slot name="title" />
<slot name="subtitle" />
<div class="flex flex-wrap gap-4 mt-8 text-center">
<slot name="link" />
<slot name="buttons" />
</div>
</div>
</div>
</section>
</template>
Hi so i have a button which displays the weather for a specific place. I want the div containing the weather to display when the button has been clicked. I have mapped all the data from the api but i cannot get it to hide until the button is clicked. Also one of the array headers is '1h' how do i map that in my code?
<template>
<div class="w-full flex flex-col items-center gap-12">
<div class="flex md:flex-row flex-col justify-center items-center md:gap-12 gap-4 px-4">
<h2 class="text-4xl md:w-2/4 text-center md:text-start font-semibold">Whats the weather like at here?</h2>
<button type="button" #click="showWeather" class="text-4xl bg-white/30 px-5 py-3 md:py-2 rounded-sm border-2 border-white hover:scale-110" >Show Me</button>
</div>
<div class="flex flex-row justify-between gap-10"> <!--- weather info starts here needs to be hidden until button click--->
<div class="text-3xl font-bold">
<p>Currently</p>
<p>{{weather.weather[0].description}}</p>
</div>
<img class="w-[80px]" v-bind:src="`https://openweathermap.org/img/w/${weather.weather[0].icon}.png`" />
<div class="flex flex-col gap-2">
<div class="flex bg-grey/50 px-3 py-1 gap-6">
<span class="flex gap-3 text-xl">
<p>Temp</p>
<p>{{Math.floor(weather.main.temp)}}°c</p>
</span>
<span class="flex gap-3 text-xl">
<p>Visibility</p>
<p>{{Math.floor(weather.visibility / 1000)}}km</p>
</span>
<span class="flex gap-3 text-xl">
<p>Rain</p>
<p>{{weather.rain.1h}}</p> <!-- title 1h -->
</span>
</div>
<div class="flex bg-stone/50 px-3 py-1 gap-6">
<span class="flex gap-3 text-xl">
<p>Wind</p>
<p>{{Math.floor(weather.wind.speed)}}mph</p>
</span>
<span class="flex gap-3 text-xl">
<p>Wind Dir</p>
<p>{{weather.wind.deg}}°</p>
</span>
<span class="flex gap-3 text-xl">
<p>Humidity</p>
<p>{{weather.main.humidity}}</p>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
api_key: '583cec8e67023fadbbfc71f95265b103',
url_base: 'https://api.openweathermap.org/data/2.5/',
location: 'lon=-1.5534757619068575&lat=53.792218178144196',
weather: {},
}
},
methods: {
showWeather(){
console.log("Test");
fetch(`${this.url_base}/weather?${this.location}&units=metric&appid=${this.api_key}`)
.then(res => {
return res.json();
}).then(
this.setWeather)
},
setWeather(results) {
this.weather = results;
},
},
}
</script>
<style lang="scss" scoped>
</style>
https://codesandbox.io/s/weather-vue-ztyc1y?file=/src/App.vue
Change the initial value of weather to null and add the
v-if="weather"
line 18 & 72
For the "1h" thing, you could use this
weather.rain["1h"]
Im trying to create a filter to filter different products but so far no success
ive tried different ways like using a long way by using IF for every filter didnt get it to work and code was way to big, tried for loop also wasnt able to do it
im trying to use "data" attribute in HTML to mark items seems to be a best way to do it?
any help is more then welcome
heres a code bellow
const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')
buttons.forEach(function (button) {
button.addEventListener('click', (event) => {
event.preventDefault()
/* active button */
buttons.forEach((button) => {
button.classList.remove('active')
})
button.className = 'active'
products.forEach(product => {
showProduct = button.textContent
if (product.getAttribute('data-filter') == showProduct.toLowerCase()){
product.style.display = 'block'
} else {
product.style.display = 'none'
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="bg-indigo-900 font-mono">
<nav class="mt-4 mb-10 text-white">
<div class="nav-bar">
<ul class="flex flex-row justify-center items-center space-x-8">
<li class=" transition transform duaration-100 hover:scale-110">
<a class="active btn filter-btn" href="#">All</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cake</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cookies</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Donuts</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Pudding</a>
</li>
</ul>
</div>
</nav>
<main>
<section class="container mx-auto flex flex-row justify-center items-center ">
<div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 ">
<!-- cakes -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cake' src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cake' src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- cookies -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cookies' src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cookies' src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- donuts -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='donuts' src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='donuts' src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- pudding -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='pudding' src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='pudding' src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/app.js"></script>
</body>
</html>
So it seems you are looking to hide everything except what button you press.
I would first place a helper class to hide elements I want to filter out of the dom using classList to toggle the class with remove() and add()
I would move the dataset.filter attribute to the parent element .products rather than use the image as a reference and try to travel up the DOM to target the parent element.
Remove and rename your image class to products-img so it is different than the products parent element.
Use a callback to add to your eventListener that checks the targetBtn value or textContent run it through an forEach loop and if statement to handle the All button, showing all elements.
else we run a forEach over products, first hiding all elements and then matching our dataset.filter value using a conditional that checks if it is equal to e.target.textContent button.
See example below:
const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')
function filterButtons(e) {
let targetBtn = e.target.textContent.toLowerCase()
targetBtn === 'all' ?
products.forEach(p => {
p.classList.contains('hide') ?
p.classList.remove('hide') : null
}) :
products.forEach(p => {
p.classList.add('hide')
p.dataset.filter === targetBtn ?
p.classList.remove('hide') : null
})
}
buttons.forEach(function(button) {
button.addEventListener('click', filterButtons)
})
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="bg-indigo-900 font-mono">
<nav class="mt-4 mb-10 text-white">
<div class="nav-bar">
<ul class="flex flex-row justify-center items-center space-x-8">
<li class=" transition transform duaration-100 hover:scale-110">
<a class="active btn filter-btn" href="#">All</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cake</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cookies</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Donuts</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Pudding</a>
</li>
</ul>
</div>
</nav>
<main>
<section class="container mx-auto flex flex-row justify-center items-center ">
<div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 parent">
<!-- cakes -->
<div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- cookies -->
<div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- donuts -->
<div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- pudding -->
<div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/app.js"></script>
</body>
</html>
currently I'm working on bulma css frameworks. I'm making contact us page but some unwanted space is there. I tried a lot but don't know how to remove that?
I just shared image of what is the problem below.
This is Image
This is Code
<section class="p-5">
<div class="columns is-desktop box has-background-grey-light m-0">
<div class="column">
<div class="has-text-centered">
<div class="box">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Our Address</p>
<p class="m-2">A108 Adam Street, New York, NY 535022</p>
</div>
<div class="columns is-desktop m-0">
<div class="column box">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Email Us</p>
<p class="m-2">info#example.com
contact#example.com</p>
</div>
<div class="column box ml-5">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Call Us</p>
<p class="m-2">+1 5589 55488 55<br />
+1 6678 254445 41</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box">
</div>
</div>
</div>
</section>
try only with TailwindCSS like this,
<section class="flex w-full flex-col bg-gray-300 text-xl">
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Our Address</span>
<div class="flex flex-col md:flex-row items-center">
<span> A108 Adam Street,</span>
<span>New York, NY 535022</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-around w-full">
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Email Us</span>
<span>info#example.com</span>
<span>contact#example.com</span>
</div>
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Call Us</span>
<span>+1 5589 55488 55</span>
<span>+1 6678 254445 41</span>
</div>
</div>
</section>
Check on the Tailwind Play