Tabs - Htmlwind

Tabs with underline

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

Tabs

Author Htmlwind

Tailwind v3.4 1.5k 3

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

Tabs section

Simon Scheffer

3 years ago

14.7k
Switch tabs button

gmer33

3 years ago

17.2k
Tab navigation with alpine JS

Mr Robot

4 years ago

18k
tabs with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

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

Alla Telegina

1 year ago

2k
chat bar
live chat

gidy

1 year ago

2.2k
Icon group

Conan Hilton

3 years ago

10.3k
Tab navigation buttons

Simon Scheffer

3 years ago

18.2k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

3 weeks ago

33
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

474
cards
cards with background animation

Anonymous

3 years ago

12.6k