I am currently facing a weird issue with a project of mine
I am attempting to make a button change its color when I hover over it and also change the text's color inside of the button
This works perfectly until I hover over the border button which triggers the hover event for the whole button but not the text inside of it
<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
<button
type="button"
class="border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
<span
class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px-
[6.625rem] font-semibold hover:text-background transition duration-100">
check this out
</span>
</button>
</a>
How could I make the border of a button not trigger the hover event ?
Or are there any other better ways to do what I am trying to do?
group-hover
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
Try this:
<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
<button type="button" class="group border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
<span class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px- [6.625rem] font-semibold group-hover:text-background transition duration-100"> check this out </span>
</button>
</a>
Related
I've got the tailwind UI toggle working. However the toggle it self doesn't do anything in a form. It needs a Checkbox. Hence I'm trying to add a checkbox that checks and unchecks when the toggle is clicked.
I gave it the right data-model, but nothing happens.
<div>
<div class="flex items-center justify-between" x-data="{ on: false }">
<span class="flex flex-grow flex-col">
<span class="text-sm font-medium text-gray-900" id="availability-label">Books</span>
<span class="text-sm text-gray-500" id="availability-description">Yes gibe me a free book</span>
</span>
<button type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 bg-gray-200"
role="switch" aria-checked="false" x-ref="switch" x-state:on="Enabled" x-state:off="Not Enabled"
:class="{ 'bg-primary-600': on, 'bg-gray-200': !(on) }" aria-labelledby="availability-label"
aria-describedby="availability-description" :aria-checked="on.toString()" #click="on = !on">
<span aria-hidden="true"
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0"
x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
</button>
<input type="checkbox" style="display:none" name="free_books" x-model="on">
</div>
</div>
I'm trying to create a custom shape that has a triangle that overflows on the square left side.
I've tried to use absolute and relative positions to achieve it by putting the square behind it but then it hides the spans on the main square. How can I do it?
Shape that I'm trying to achieve
My code:
<div class="h-96 p-6 bg-white relative rounded-3xl border-3 border-white shadow-sm transition ease-in-out hover:scale-110">
<div class="flex justify-between">
<i class="fa-solid fa-gem text-4xl text-secondary"></i>
<div class="absolute -top-5 right-8 flex flex-col items-center p-4 bg-blue">
<span class="text-purewhite font-semibold text-3xl">25€</span>
<span class="text-gray-200 font-semibold">for month</span>
</div>
<!-- <span class="text-3xl text-primary font-medium">Base</span> -->
</div>
</div>
This is what my current UI looks like
Already written in the top
I'm using PefrectScroll in the notification list, but to prevent scrolling of the whole page while I'm scrolling in the notification list, I have to use overflow:auto and overscroll-behavior:contain.
When I put overflow:hidden to hide that extra scroll, the whole page scrolls again while I'm scrolling in the notifications list. Is there a way to hide that useless "double" scroll while I'm still using my perfect scroll, and the whole page prevent to scroll too ?
<div ref="notificationsDropdown" id="notifications-dropdown"
class="origin-top-right absolute right-0 mt-2 w-64 rounded-md shadow-lg opacity-0 scale-95 pointer-events-none top-full transform transition ease-out duration-100 bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="px-4 py-3 w-full text-center" role="none">
<p class="text-xl text-[#3690b5] font-bold" role="none">Notifications</p>
</div>
<div class="py-1 max-h-96 relative" tabindex="-1" id="notification list" role="none">
<li click.delegate="navigateToProject(notification.data.projectId)"
repeat.for="notification of projectNotifications"
class="text-gray-700 no-scroll-chain overscroll-contain list-items block px-4 py-2 text-sm border-b hover:bg-gray-200 transition-all duration-150 border-[#eee] cursor-pointer"
role="menuitem" tabindex="-1" id="menu-item-0">
<h5>${notification.data.text}</h5>
<p class="text-sm text-gray-400">
${transformDate(notification.timestamp)}
</p>
</li>
</div>
</div>`
According to documentation, this is how you style a button with Tailwind:
<button class="py-2 px-4 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
Click me
</button>
This shouldn't require any special configuration.
But when I try this code in Tailwind Play, the button doesn't even get rendered.
What gives?
Many thanks in advance.
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.