I want my heading to display over the background image. I am trying to use z-index but it is not working. Here is my code. Any help will be very grateful.
<div
className="
bg-banner
bg-cover
opacity-60
h-screen
flex flex-col
space-y-0
items-center
justify-center
text-center
overflow-center
-z-[20]
"
>
<h1 className="">
<span>{text}</span>
<Cursor cursorColor="green" />
</h1>
</div>
Related
I have the following problem with Tailwind CSS and the truncate helper.
The code for the following image:
<div class="w-full flex items-center flex-wrap gap-y-2">
<!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
<!-- but the shortest words get cut even tho they have space to grow. -->
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
Audience
</h1>
<!-- Middle nav div -->
<div class="mr-auto">
... nav here
</div>
<!-- Right side buttons -->
<div class="flex flex-wrap">
... buttons
</div>
</div>
Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.
Any ideas? Thanks!
I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?
<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
I want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
Changing image on mouse hover :
I have a png image , with text engineerign and another picture with same text but different style.
I need on Hover to change between these 2 images.
I did that few times with normal <img TAG but in next js we need to use their <Image tag insted and this is not possible :
<Image src={engin} alt={'something'} onMouseOver={e => (e.currentTarget.src =
engin_fill)} />
Help is really appriciated
You can create 2 components inside some wrapper and just switch them on hover
<Wrapper onMouseOver={() => setHovered(true)}>
{!hovered&&<Image1/>}
{hovered&&<Image2/>}
</Wrapper>
You should use Tailwind CSS. After that, the code will look like:
<Image src={engin} class="z-20 hover:z-0" />
<div class="z-10">Text</div>
e.g.-
<div class="relative ">
<a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
<h1 class=tracking-wider >Title</h1>
<p class="mx-auto">Description</p>
</a>
<a href="#" class="relative">
<div class="h-48 flex flex-wrap content-center">
<img src="/image_url" class="mx-auto " alt="">
</div>
</a>
More answers:
Tailwind CSS: display text on image hover
How to install tailwind css: https://tailwindcss.com/docs/installation
I have a flexbox with 3 children items that looks something like this:
<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>
This works fine in full screen, however flex items start to break out of parent after shrinking the window width (near 1000px).
How can I make it so the items stay inside their parent?
Fullscreen
After shrinking window width
What I would like to achieve
By adding flex-wrap class in the parent(section tag in your case) will fix the issue.
Read more about flex-wrap https://tailwindcss.com/docs/flex-wrap
If you use flexbox, you can use flex wrap property to solve your proble.,
But i try to get the same result with grid
<div class="container py-10">
<section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
</section>
</div>
This is better i think :)
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>