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

car delivary
car delivary

Bonimater

1 year ago

1.3k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Responsive Projects Section

ariaw

1 year ago

1.4k
background animation
background animation

Anonymous

10 months ago

1.2k
Sharp corner button design
button with hover effect

Amit Pachange

3 years ago

13.5k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Homayoun

11 months ago

1.2k
button-neon-purple-super

Mohammad Rashel

10 months ago

1.1k
Custom Carosel

Md. Tofayel islam

2 years ago

3.8k
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

12.9k
Card Cartier Product
Card Based View of Cartier

Ameth Galarcio

1 year ago

1.5k
Animated Info Card
Animated info card

Shivam Vishwakarma

1 year ago

1.8k
3d car delivary
3d car delivary

Bonimater

1 year ago

1.7k