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.5k

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.5k
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

Author:
isaSxm

2 months ago

315
Card animate

Author:
Raul antonio de la cruz hernandez

9 months ago

1.1k
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

7 months ago

835
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

10 months ago

1.5k
Feature Card

Author:
Md. Tofayel islam

1 year ago

1.7k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

41.9k
shoose
shop now

Author:
Nirere Esther

6 months ago

709
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

6 months ago

562
Simple Btn animation

Author:
Ranit Saha

10 months ago

1.7k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

6 months ago

783
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

20.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components