I made this style for side bar navigation
I made a box and used transform to hide it on the left side, to get the curved border effect.
On hover, active ect
Border button -> bg-green-300
text-green-300 for icon and text
font-semibold for text only
<a href="/dashboard">
<div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200">
<div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>
<div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
<i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
<h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
</div>
</div>
</a>
Is there something I can add to the main div to activate the hover effect in each child element at same time?
Right now it works only when I hover over each individual element.
Any help is much appreciated :)
Use group-hover state
Add group class to your parent element (anchor-tag in your case)
Replace hover: with group-hover:
Worth to mention not every property supports group-hover, so there can be situation, where you may need to extend core plugins. More info about group-hover here
DEMO https://play.tailwindcss.com/dzacJTR76X
Use group in parent and group:hover in child
Code Structure:
<div class="group">
<div class="group-hover:... "/>
<div class="group-hover:... "/>
</div>
Example:
<div class="group flex ">
<div class="rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 "></div>
<i class="text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer ">Brighten me</i>
</div>
Output:
OnHover:
Related
I'm aware that I can add a blur placeholder or blur animation until the image has loaded, but I don't feel that's the way to go for a hero section, I would say that's pretty bad UX.
I'm already using the priority prop, which I thought would solve the issue I'm seeing.
Page is using getStaticProps and pictures are served via Cloudinary.
Video of behavior:
https://jumpshare.com/v/JPq1yXozMTKrQREl0s7U
Is there a way to tell Next.js to not serve the page until the hero image is loaded?
In this case, I rather have the user wait so that the page is served with the pictures directly.
Or do I need to switch completely to server-side rendering for the whole index page, or is there another way to go about it?
Hero section:
<div className="hidden sm:relative sm:z-0 sm:block sm:h-[calc(100vh-89px)] sm:overflow-hidden sm:border-b sm:border-black sm:bg-cover sm:bg-fixed sm:bg-center sm:bg-no-repeat">
<Image src={heroDesktopImage} objectFit="cover" alt={heroDesktopImageAlt} layout="fill" priority={true} />
<div className="mx-auto h-full max-w-screen-3xl ">
<div className="flex h-full w-full items-end justify-center">
<div className="relative bottom-[15%] text-center">
<h1 className="mb-8 text-4xl font-bold text-white">{lead.toLocaleUpperCase()}</h1>
<button className="border border-gray-900 bg-white text-sm text-gray-900 lg:hover:bg-black lg:hover:text-white ">
<Link href="/products" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="block h-full w-full py-5 px-10">{buttonText.toLocaleUpperCase()}</a>
</Link>
</button>
</div>
</div>
</div>
</div>
I want to trigger a dropdown menu via hover so use #mouseover. But when the cursor places between text and chevron, dropdown becomes hide. I use mouseover with a tag so it should contain text and chevron, shouldn't it?
here's my code
<header class="relative z-50" x-data="{ dropdown: '' }">
<nav class="overflow-hidden z-50">
<div class="container space-x-14 py-7 desktop:justify-start flex items-center z-50">
<nav class="space-x-14">
<a #mouseover="dropdown = dropdown === 'open' ? '' : 'open'" class="cursor-pointer font-semibold">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span> <span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
</a>
what is the prolem?
To fix this, we need to embed the two <span> elements into a <div> where we add the pointer-events-none class (assuming you are using TailwindCSS) to disable the pointer events of the child elements. Furthermore we also add the #mouseleave event to change the open state.
<a #mouseover="dropdown = 'open'"
#mouseleave="dropdown = ''"
class="cursor-pointer font-semibold">
<div class="pointer-events-none">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span>
<span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
<div>
</a>
I have a logo and back-to-home button in header. logo has to be in the middle of header and button has to be at the and of header. When I try justify-between logo is at the start. Which tailwind class/classes can give me the solution?
<div class="flex justify-between mt-10">
<x-app-logo mode="" classes="pb-8 w-60 justify-self-center"></x-app-logo>
Back to home
/div>
You can make an empty element before your logo to hold the space on the left side. And then apply the same width to the first and last elements. This way the justify-between will keep the logo in the center. Here it is on Tailwind Play https://play.tailwindcss.com/1Lp9GvNz3O
<div class="flex justify-between items-center p-4">
<!-- Keeps the space equal on this side -->
<div class="w-32"></div>
<!-- Your logo here -->
<div class="flex justify-center rounded-full h-8 w-8 bg-yellow-500"></div>
Back to home
</div>
you can make it position:absolute like this 👇
<div class="relative flex items-center justify-center">
<h1>LOGO</h1>
<a href="/" class="absolute inset-y-0 right-5 my-auto">
Back to home
</a>
</div>
I am working with the TALL architecture (TailwindCSS + AlpineJS + Laravel + Livewire) in a project and I want to achieve the transition specified in the question title:
Fade out old text
Replace text
Finally fade in new text
My best try so far:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{ formMode: 'create' }">
<div x-show="formMode == 'create'" class="px-4 sm:px-0"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Create new project
</h3>
</div>
<div x-show="formMode == 'update'" class="px-4 sm:px-0"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Update project details
</h3>
</div>
<button #click="formMode = 'update'" type="button"
class="items-center px-2.5 py-1.5 text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
Toggle text
</button>
</div>
This actually fades out text, replaces it and fades in the new one based on formMode variable in AlpineJS but the problem is that I am working with 2 different divs + h3, and thus there is an undesired overlap when both elements are transitioning, losing the visual effect.
Any ideas on how could it be done using only one div + h3?
Thanks in advance.
I am using accordion something like this
https://www.tailwindtoolbox.com/components/accordion and I have a input field inside my accordion
<div class="tab-content overflow-y-scroll border-l-2 bg-gray-100 border-indigo-500 leading-normal">
<div class="border border-black mt-3 p-3 grid grid-cols-4">
<div class="col-span-1">
<label for="about" class="block text-sm leading-5 font-medium text-gray-700">
Title
</label>
<div class="rounded-md shadow-sm">
<textarea wire:model="additional_docs.title" name="additional_docs" id="edit_additional_docs" name="" rows="3" class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" placeholder="description"></textarea>
</div>
<p class="mt-2 text-sm text-gray-500">
Document Title
</p>
</div>
</div>
The accordion is working fine but as soon as I start typing the accordion closes and I need to open accordion again and start typing, but if I remove wire:model ,it works fine .I am new to live wire and if I use wire:ignore it doesn't help too.
Thanks for any help :)
Add wire:ignore.self on the element which will be hidden/shown.