Onhover underline effect

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

Hover Animation

Author Dika Rahman

Tailwind v3.4 4.6k 12

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

Walid Ahmad

2 years ago

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

isaSxm

1 year ago

897
Corner‑Framed Hover Transition Buttons
Minimal CTA buttons featuring animated corner shapes and smooth width transitions on hover, built with Tailwind CSS for a sharp, modern UI.

Arshid Iqbal

2 months ago

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

Ragnar lodbrok

1 year ago

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

SAI BENDE

1 year ago

1.6k
Button
Button When Hover and page Reload then Button text will show the animation

Chitranshu

2 years ago

3.4k
car delivary
it is used especially in e-commerce when you you are going to deliver

Bonimater

1 year ago

1.5k
Animated cards

Prajwal Hallale

4 years ago

30.1k
Animated Coming Soon Page 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.2k
Interactive Multi-Layer Orbit Animation with Tailwind CSS
A responsive multi-layer orbit animation built with Tailwind CSS featuring rotating circular paths, floating icons, and a centered logo. Perfect for modern landing pages and portfolio hero sections.

Arshid Iqbal

3 months ago

95
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
coffee shop
shop

Nezerwa Debora

1 year ago

1.2k