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

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
Tab section

EliteAI Tools

1 year ago

2k
Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Tab Switch
tab-switching example with tailwind and vanilla JS

Prajwal Hallale

3 years ago

7.9k
Switch tabs button

gmer33

3 years ago

17.2k
Tab navigation buttons

Simon Scheffer

3 years ago

18.2k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Icon group

Conan Hilton

3 years ago

10.3k
Basic Tabs
Trying to simplify tabs while making them accessible and responsive.

Sherry Lynne

1 month ago

249
Working tabs switch

Fagundo67

3 years ago

15.7k
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

475
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

4 weeks ago

37