Home
Htmlwind
Tabs - Htmlwind

Tabs - Htmlwind

Tabs with underline

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Tabs

Author Htmlwind

552

Fork Fullscreen

<div class="bg-white py-12">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="w-full">
      <div class="sm:hidden">
        <select aria-label="Select a tab" class="w-full appearance-none rounded-lg border-none bg-white px-3.5 py-2.5 text-base font-medium text-gray-900 shadow-sm outline outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-500 focus:ring-0">
          <option>Overview</option>
          <option selected="">Analytics</option>
          <option>Profile</option>
          <option>Notifications</option>
          <option>Plan</option> 
          <option>Settings</option>
        </select>
      </div>
      <div class="hidden sm:block">
        <div class="border-b border-gray-200">
          <nav aria-label="Tabs" class="-mb-px flex items-end gap-x-8">
            <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Overview</a>
            <a href="#" aria-current="page" class="inline-flex border-b-2 border-pink-500 px-1 py-3.5 text-sm font-semibold text-pink-500">Analytics</a>
            <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Profile</a>
            <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Notifications</a>
            <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Plan</a>
            <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Settings</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Switch tabs button

Author:
gmer33

2 years ago

15.9k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

7 months ago

1.3k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
Tab navigation with alpine JS

Author:
Mr Robot

3 years ago

17.1k
Working tabs switch

Author:
Fagundo67

2 years ago

14.8k
tabs with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
cards
cards with background animation

Author:
Anonymous

1 year ago

3k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

6.1k
Icon group

Author:
Conan Hilton

2 years ago

9.8k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

118
Tabs section

Author:
Simon Scheffer

2 years ago

13.2k
chat bar
live chat

Author:
gidy

5 months ago

810

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components