Collection of free Tailwind CSS tab components from Codepen and other resources.

Related Articles

  1. CSS Tabs
  2. Bootstrap Tabs
  3. JavaScript Tabs
  4. jQuery Tabs
  5. React Tabs
  6. Vue Tabs
Demo image: Tabs

Author

  • Kamona-WD

Links

Made with

  • HTML / CSS / JS

About a code

Tabs

Tabs with transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js, perfect-scrollbar.js

Tailwind version: 3.0.18

Demo image: Tailwind CSS Tabs

Author

  • zoltanszogyenyi

Links

Made with

  • HTML / CSS / JS

About a code

Tailwind CSS Tabs

Use this interactive tabs component to change the content below each tab when switching from one to another.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: flowbite.css, flowbite.js

Tailwind version: 2.2.19

Demo image: Tabs

Author

  • Mostafa Ahangarha

Links

Made with

  • HTML / CSS / JS

About a code

Tabs

Tabs with two styles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.3

Demo image: Dialog with Tabs

Author

  • Mostafa Ahangarha

Links

Made with

  • HTML / CSS / JS

About a code

Dialog with Tabs

A responsive dialog with a fullscreen dark transparent background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.3

Demo image: Interactive Tabs

Author

  • amirrahman132132

Links

Made with

  • HTML / CSS / JS

About a code

Interactive Tabs

Interactive tabs with heading in top and pages below with their corresponding buttons in top.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Underline/Active with Text and Border Color Tabs

Author

  • HyperUI

Links

Made with

  • HTML / CSS

About a code

Underline/Active with Text and Border Color Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0

Demo image: Underline with Icon/Active Border Color Tabs

Author

  • HyperUI

Links

Made with

  • HTML / CSS

About a code

Underline with Icon/Active Border Color Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Underline/Active Border and Inactive Background Tabs

Author

  • HyperUI

Links

Made with

  • HTML / CSS

About a code

Underline/Active Border and Inactive Background Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Argon Tabs with Icons

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Argon Tabs with Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Argon Tabs

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Argon Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Biings Boxed Tabs

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Biings Boxed Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Biings Tabs Rounded Full

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Biings Tabs Rounded Full

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Biings Tabs Rounded

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Biings Tabs Rounded

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo Biings Hanging Tabs

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Biings Hanging Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo Biings Tabs

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Biings Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Tabs #1

Author

  • Mamba UI

Links

Made with

  • HTML / CSS

About a code

Tabs #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Line With Icons Tabs

Author

  • MerakiUI

Links

Made with

  • HTML / CSS

About a code

Line With Icons Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: End Closed With Icons Tabs

Author

  • MerakiUI

Links

Made with

  • HTML / CSS

About a code

End Closed With Icons Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+