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

Demo image: Tabs

Author

  • Kamona-WD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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+