I'm trying to build a card tailwind css with a background image and a blurred lower part of the card
Above this blurred area, I would like to display a label.
The expected result is this:
So far I have this rendering:
On the blurred area, it seems that there is like a white or gray inner border, I don't know why.
This is my code :
<div class="w-80 h-52 relative mx-0 my-auto rounded-2xl overflow-hidden">
<div class="w-full h-full bg-cover bg-center" :style="{ backgroundImage: 'linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)), url(' + url + ')' }">
<div class="absolute w-full h-16 bottom-0 z-10 flex text-center justify-center items-center backdrop-blur-sm overflow-hidden">
<span class="text-2xl text-white font-nunito">{{ label }}</span>
</div>
</div>
</div>
Related
When I use the inherit property on a <span> it doesn't take the color of the parent, but it instead takes the color of the sibling.
My JSX:
<div className={`relative flex items-center justify-center bg-blue-500`}>
<span
className={`bg-rose-600 border-4 border-inherit h-16 w-16 absolute top-1 rounded-full duration-500 ${Menus[active].dis}`}>
</span>
<div className={`bg-white max-h-[4.4rem] max-w-[360px] px-6 rounded-t-xl mt-6`}>
</div>
I want the span to take the blue color, not the white one.
I tried to put important on the bg-color of the parent, but that doesn't work.
Any ideas?
You are missing border-color in your parent:
<div class="... border-amber-400 "> 👈 add border color here
<span class="border-inherit ... "> </span>
<div class="... "></div>
</div>
Complete code:
<div class="relative flex items-center justify-center border-amber-400 bg-blue-500">
<span class="absolute top-1 h-16 w-16 rounded-full border-4 border-inherit bg-rose-600 duration-500"> </span>
<div class="mt-6 max-h-[4.4rem] max-w-[360px] rounded-t-xl bg-white px-6"></div>
</div>
I am trying to create a homepage that has two columns, one with text and another with a carousel of images.On web view, the layout looks great, but on mobile view, the images are compressed leaving a lot of space around. I have tried setting the image height to full with h-full which doesn't work. How can i make the image occupy the full grid height on mobile view as well? Any recommendations / references will be appreciated.
My code :
<section className="p-9">
<div className="min-h-screen grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 items-center pt-9">
<div className="col-span-2">
<p className="font-bold text-4xl mb-4 ml-4">
A construction <span className="text-red-600">ecosystem</span> that is
simple, transparent and <span className="text-red-600">efficient</span>
</p>
</div>
{/* <div className="h-full col-span-6">
<img className="w-full h-full m-2" src={carousel1} />
</div> */}
<div
id="carouselExampleCrossfade"
className="absolute carousel slide carousel-fade carousel-dark relative col-span-6 m-2"
data-bs-ride="carousel"
>
<div className="carousel-inner relative w-full h-full overflow-hidden">
<div className="carousel-item active float-left w-full bg-no-repeat bg-cover">
<img
src="https://www.shell.com/business-customers/construction-and-road/about-construction-and-road/_jcr_content/pagePromo/image.img.960.jpeg/1652883928742/two-engineers-working-on-a-construction-site.jpeg"
className="block w-full h-full rounded"
alt="Wild Landscape"
/>
<Link
href={`/service`}
className="absolute bottom-0 left-0 m-6 py-2.5 px-2.5 bg-red-600 text-white font-medium text-md leading-tight rounded hover:text-red-700 hover:bg-gray-100 focus:bg-none focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out"
>
<span>{"Testing"}</span>
</Link>
</div>
</div>
</div>
</div>
</section>;
Link to code here
Current view on mobile:
Current view on web:
I am trying to make the following happen:
On image hover, at the bottom it will show comments/reactions on the left and name on the right
I cannot get the 2 divs to space between at the bottom and I do not know why.
https://play.tailwindcss.com/jyBq62Ok90 is the working code
You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.
See this tailwind play
Hope this helps.
As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs
You can use group-hover utility with a div wrapper. Below code will help you much more
<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>
I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.
This is the full component:
<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
<div id="settings-content" className="flex flex-col self-center mx-5">
<div id="header" className="flex flex-col mt-5">
<div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
</div>
<div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
<div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 flex-grow bg-red-500"></input>
</div>
</div>
</div>
This is what the button looks like with a smaller screen, when both words should be on the same line:
You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.
For example:
<div id="block-site-add-list" className="flex flex-row ...">
<div className="shrink-0 flex flex-row ...">
<AddIcon></AddIcon>
<div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 grow bg-red-500"></input>
</div>
How do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children div.
<div className="relative w-full h-screen">
<div className="bg-green-400 w-full h-full z-0">
<p className="italic text-bold bd-red-100 font-serif">Map</p>
</div>
<div className="absolute z-50">
<p className="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
Here's a Tailwind Play Code I created based on your query. I have tweaked height and width for proper visual.
<div class="w-full h-screen bg-gray-200 flex justify-center items-center">
<div class="bg-gray-400 w-96 h-96 relative z-0">
<p class="italic text-bold bd-red-100 font-serif">Map</p>
<div class="absolute inset-0 flex justify-center items-center z-10">
<p class="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
</div>
I would like to extend #Digvijay's answer further more to provide extended explanation, which consists
1. Logic
2. Responsive Sidebar
3. Responsive Sidebar with hamburger menu
You'll have to work with relative absolute and z-index to make this work.
1. Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Code:
<div class="h-screen relative z-0 flex bg-gray-500">
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Output:
Code Link: tailwind play
2. Responsive Sidebar
If you are aiming to build responsive sidebar which overlaps only on the mobile screen but would be normal div in the large screen then follow the below code.
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Code link : tailwind play
Output in large device:
Output in smaller device:
3. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>