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>
Related
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
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 quite new to Tailwind CSS and I am trying to set two images inside a banner with first image to take 1/3 of width and second image to take 2/3 of width when this image is viewed on desktop screen. In mobile I need the images to be shown in full width so user can scroll right and left to each image.
Right now my code works fine on desktop but on mobile it shows images in the same arrangement i.e. as 1/3 and 2/3 of screen width, which is not what I want. I have tried targeting md:w-1/3 and 2/3 respectively but it seems to mess up everything.
I also tried using md:grid md:grid-cols-3 in the inner div element and then set the second picture as md:col-span-2 but it did not work.
I would appreciate any guidance on what is wrong with my code. Thank you a lot in advance.
<div class="images-wrapper">
<div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
<a class="w-1/3" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
</a>
<a class="w-2/3" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
</a>
</div>
</div>
when u use tailwind css first u need to start building with phone resolution and move up ,so u can use when class="w-full md:w-1/3 lg..." class="w-full md:w-2/3 lg..."
So I figured out the issue next morning, I targeted w-1/3 for md sized screens and set min-width too. Final code looks like:
<div class="images-wrapper">
<div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
<a class="w-full md:w-1/3 min-w-full md:min-w-0" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
</a>
<a class="w-full md:w-2/3 min-w-full md:min-w-0" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
</a>
</div>
</div>
Another thing causing the problem was my browser not responding to CSS updates immediately but only after localhost restart so please make sure that your updates to CSS are rendered properly. Thanks to Zemame Youcef Oualid for the advice.
I want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.
For example:
----------------------------------- Continue -----------------------------
I can't find anything like this in the documentation. How can I achieve this effect?
If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.
You can use this HTML syntax to create what you want :
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Content</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
See here the result: https://play.tailwindcss.com/65JULZ5XES
Try this instead...
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-b border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-4 text-sm text-gray-500">Continue</span>
</div>
</div>
Example
https://play.tailwindcss.com/Yx4OmAlBsv
Yes, you can do this:
<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black
after:inline-block after:relative after:align-middle after:w-1/4
before:bg-black before:inline-block before:relative before:align-middle
before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>
Try this.
Need to adjust the height, margin, bg-color, etc. to fit your website.
https://play.tailwindcss.com/FzGZ1fMOEL
<div class="h-5 border-b-4 border-black text-2xl text-center">
<span class="bg-white px-5">your text</span>
</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!!