Home
Dika Rahman
Onhover underline effect

Onhover underline effect

This tailwind example is contributed by Dika Rahman, on 23-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Hover Animation

Author Dika Rahman

3.9k

Fork Fullscreen

<div class="space-y-4">
    <div class="flex justify-center gap-2 bg-gray-100/50 rounded-xl p-4 font-semibold">
        <a class="p-2 px-4 group" href="#">
            About
            <div class="bg-teal-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
        </a>
        <a class="p-2 px-4 group" href="#">
            Services
            <div class="bg-teal-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
        </a>
        <a class="p-2 px-4 group" href="#">
            Contact
            <div class="bg-teal-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
        </a>
    </div>

<div class="flex justify-center gap-2 bg-gray-100/50 rounded-xl p-4 font-semibold">
        <a class="p-1 px-4 group relative" href="#">
            <span class="text-gray-800">About</span>
            <div
                class="absolute bottom-0 left-0 bg-teal-500 h-0 w-full transition-all duration-500 group-hover:h-[2px]">
            </div>
        </a>
        <a class="p-1 px-4 group relative" href="#">
            <span class="text-gray-800">Services</span>
            <div
                class="absolute bottom-0 left-0 bg-teal-500 h-0 w-full transition-all duration-500 group-hover:h-[2px]">
            </div>
        </a>
        <a class="p-1 px-4 group relative" href="#">
            <span class="text-gray-800">Contact</span>
            <div
                class="absolute bottom-0 left-0 bg-teal-500 h-0 w-full transition-all duration-500 group-hover:h-[2px]">
            </div>
        </a>
    </div>
</div>

Related Examples

Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.6k
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

Author:
isaSxm

5 months ago

347
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

9 months ago

1.1k
Brand Grid with Hover Effect

Author:
ariaw

10 months ago

1.5k
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

8 months ago

1.1k
news coffee &tea
According to large population studies, coffee and tea both appear to be good for your heart, lowering risk for heart disease and stroke.

Author:
Augustin

8 months ago

541
card delivary
card

Author:
bonheur dev

7 months ago

658
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

6 months ago

678
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Author:
Homayoun

4 months ago

301
Animated cards

Author:
Michael Andreuzza

1 year ago

6.9k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.6k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components