In my web project, I'm trying to reproduce the following card:
When the Card is not active it is characterized by the fact that the image is always in the center even though the title has a dynamic height, and when its active (i.e it has the blue background) I don't want to change the height of the card but just to push the image up a little bit to add that extra space where the new round arrow button will appear and I'm completely unable to make this happen.
I'm using tailwind in a Nextjs project but plain and simple html and css would also be fine.
You could use flexbox to align the content to the bottom of the card and give the text a fixed height when inactive to keep it at the same position regardless of whether it spans one or two lines.
To move everything up for the arrow you could render an arrow element below the text when he card is active and it would automatically push everything up. You could remove the fixed height of the text when active so there is no gap between the text and arrow. I have created an example here https://play.tailwindcss.com/7h1IY8alDQ.
Here is the code:
<div class="flex h-screen space-x-4 bg-blue-100 p-6">
<!-- card 1 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Motor</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
<!-- card 2 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Workmen Compensation</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
</div>
Related
Hi I want to create a layout which emulates selecting filter in a camera app (like snapchat or Instagram) using just css and scroll snapping.
Reference:
I have achieved a solution but the problem is, it is not responsive. The snapping misaligns when the width is changed. So, my solution is only good for one resolution. Ideally, When the screen width is changed - the "filters" or circular divs should snap in the middle of the ring.
Here's my solution (using tailwindcss):
<div style="background: url('https://images.pexels.com/photos/13025682/pexels-photo-13025682.jpeg?auto=compress')" class="relative h-screen w-full overflow-hidden bg-cover">
<div class="absolute bottom-4 h-24 w-full">
<div class="flex w-full items-center justify-center">
<div class="h-16 w-16 rounded-full border-2"></div>
<div class="absolute left-0 w-full bg-red-500/20">
<div class="hide-scrollbar relative flex w-full snap-x snap-mandatory space-x-[4em] overflow-scroll pl-[22.10em] pr-[24em]">
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200">0</div>
</div>
</div>
</div>
</div>
</div>
Here's the above code in action: https://play.tailwindcss.com/VLhEtnYXmH
How do I make the UI responsive?
Well, I think your problem isn't exactly the snap distance but the way you handled this element...
You have to create kind of "dumb" items before and after your circle elements with a shrink-0 class :
<!-- Begin Dumb item -->
<div class="snap-center shrink-0">
<div class="w-dumb shrink-0"></div>
</div>
<!-- End Dumb item -->
and a width matching your screen (so, you need a css calc()).
Unfortunately, there's no such calc class in Tailwind that I know of...
So you have to create a custom class in this "dumb" element, before and after yours and add this css :
.w-dumb {
width: calc((50vw) - 3rem)
}
(Note that I added this custom class in my "dumb" html element
Here's a working sandbox :
https://play.tailwindcss.com/YUKxiYgu2l
(I took advantage of the opportunity to correct a little your structure and css classes)
Edit
Note that if you want to make the space bigger between your circle elements, you just have to change the tailwind class gap-6 to, let's say gap-10. But if you do so, you have to adapt the .w-dumb class and put a higher minus rem (width: calc((50vw) - 4rem for a gap-10 for example).
The goal is to hide an element behind a parent. There is a relative parent position, and a fixed child position, so when you scroll down, the fixed child will become visible and the parent will go up.
The image with yellow border shall go behind
Here's what I've tried:
<!-- hamburger menu -->
<div class="relative bg-white z-50 border-2 border-purple-900 w-[34%] h-auto flex justify-end items-center">
<div class="fixed top-6 right-1 z-20 border-2 border-yellow-500">
<a class="lg:hidden inline-block float-right text-red-600 mr-[3px] mt-1 p-[6px] bg-white rounded-full border-2 border-yagya-red" href="#">
<button id="mobile_menu1" class="relative outline-none w-7 h-7">
<div role="hidden" id="line" class="inset-0 w-4 h-0.5 m-auto rounded-full bg-yagya-red transition duration-300"></div>
<div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
<div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
</button>
</a>
</div>
</div>
thank you!
To add a z-index you have to use class:
z-10 : To bring that element forward
-z-10 : To bring that element backward
You can take the below example
<script src="https://cdn.tailwindcss.com"></script>
<!-- red with positive z-index -->
<div class="p-10">
<div class="w-24 h-24 bg-red-600 rounded-full z-10 absolute"></div>
<div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div>
</div>
<!-- red with negative z-index -->
<div class="p-10">
<div class="w-24 h-24 bg-red-600 rounded-full -z-10 absolute"></div>
<div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div>
</div>
FInd more here
I have following sample, written in tailwind css:
https://play.tailwindcss.com/f9iOK1e0oM
I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.
How to achieve this?
You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.
<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>
https://play.tailwindcss.com/ilTMM5glku
I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.
Hope this helps.
I'm trying to create a kanban board with tailwind css.
but I'm facing an issue when there are a lot of items in a list.
the list height grows and I'm not able to scroll. because I've added overflow-y-hidden to the container.
the max height of the list should not be greater the container and if there are more items I want to show a scroll bar instead.
How can I achieve this?
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div
class="absolute top-0 bottom-0 left-0 right-0 flex items-start pb-16 overflow-x-auto overflow-y-hidden select-none "
>
<!-- List Start -->
<div class="mx-1 bg-white border rounded-lg" style="min-width: 260px">
<!-- Header Start -->
<div class="flex items-center px-4 py-3 space-x-2 border-b">
<h2 class="text-sm font-medium uppercase">Approved</h2>
</div>
<!-- Header End -->
<!-- Items Start -->
<div
class="relative flex flex-col h-full px-4 py-4 space-y-3 overflow-auto bg-white "
style="background: white none repeat scroll 0% 0%"
>
<div
class="flex items-center w-full px-1 text-sm border rounded-lg shadow-sm cursor-pointer select-none group"
style="background: white none repeat scroll 0% 0%"
>
<button type="button" class="inline-block w-full py-2 text-left">
Create email templates for BPM
</button>
</div>
</div>
<!-- Items End -->
<!-- Add New Start -->
<div class="flex items-center px-4 pb-4">
<button
type="button"
class="flex items-center px-2 py-1 space-x-2 text-gray-700 rounded-md hover:bg-gray-100"
>
<span>Add New</span>
</button>
</div>
<!-- Add New End -->
</div>
<!-- List End -->
</div>
From the tailwind docs:
Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.
<div class="overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>
I have a web app I'm building out in Rails 5, Ruby 2.4. Im using Tailwindcss as my design framework.
I have a hero image (below) in which I'm using a tailwind like alert as a banner to advertise a new web store for merch. It sits exactly where I want it to im the hero, however on page scroll it floats over my fixed nav, and in mobile view with the nav menu dropped down it floats overtop of it blocking the nav view.
Im not too sure how to fix this so it sits behind the nav and dosnt obstruct the nav functionality.
link to site for viewing
Loadlead website
my hero image code:
<div class="flex flex-wrap sm:block bg-transparent" id="header-hero">
<div class="container mx-auto">
/* BANNER THATS CAUSING ISSUES */
<div class="bg-transparent text-center py-4 lg:px-4">
<div class="p-2 bg-load-lead-green items-center text-white leading-none lg:rounded-full flex lg:inline-flex opacity-75 border-b-4 border-black md:mt-8">
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 border-b-2 border-black">New</span>
<span class="font-semibold mr-2 text-left flex-auto">Pre-order LoadLead gear in our new web store</span>
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
</div>
</div>
/* END BANNER */
<div class="flex py-8 px-4 sm:px-8">
<div class="w-full py-8">
<p class="text-4xl text-black font-sans font-bold mb-1">Trucking. Simplified</p>
<p class="text-xl text-black sm:text-lg mb-6 font-sans font-semibold">Minimize your trucks downtime & keep your loads moving!</p>
<a class="bg-blue text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-blue border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Take a Tour</a>
<a class="bg-load-lead-green text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-load-lead-green border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Join the Community</a>
</div>
</div>
</div>
</div>
Any help here would be greatly appreciated!
You need to have your hero as relative and the banner as absolute positions.