Collection of free Tailwind CSS dashboard code examples from Codepen and other resources.

Demo image: Dashboard Template

Author

  • khatabwedaa

Links

Made with

  • HTML / CSS / JS

About a code

Dashboard Template

Dashboard template built with Tailwind CSS.

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 3.0.18

Demo image: Tailwind CSS Task Manager Dashboard UI

Author

  • Tirso Lecointere

Links

Made with

  • HTML / CSS

About a code

Tailwind CSS Task Manager Dashboard UI

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.15

Demo image: Group List

Author

  • Anonymous

Links

Made with

  • HTML / CSS

About a code

Group List

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Inbox

Author

  • Akhil

Links

Made with

  • HTML / CSS

About a code

Inbox

Inbox mail dashboard.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.1.4

Demo image: Admin Dashboard Along with Dark Mode & Responsive Sidebar

Author

  • Robin Hossain

Links

Made with

  • HTML / CSS

About a code

Admin Dashboard Along with Dark Mode & Responsive Sidebar

Admin template with responsive sidebar along with several responsive components.

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.1.4

Demo image: Dashboard

Author

  • safwanAzman

Links

Made with

  • HTML / CSS / JS

About a code

Dashboard

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.3

Demo image: Discord Clone

Author

  • Andromeda

Links

Made with

  • HTML / CSS

About a code

Discord Clone

Discord UI clone.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Demo image: Responsive React Dashboard with Tailwind

Author

  • Dilum Sanjaya

Links

Made with

  • HTML / CSS / JS

About a code

Responsive React Dashboard with Tailwind

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

Responsive: yes

Dependencies: react.js, react-dom.js, recharts.js

Tailwind version: 2.0.3

Demo image: Project/Kanban Board - with Tailwind CSS

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Project/Kanban Board - with Tailwind CSS

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.1

Demo image: Dashboard UI

Author

  • Mert Cukuren

Links

Made with

  • HTML / CSS

About a code

Dashboard UI

An example of how you can support dark mode using Tailwind CSS.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0

Demo image: Online Courses Dashboard

Author

  • Azri Kahar

Links

Made with

  • HTML / CSS

About a code

Online Courses Dashboard

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.12

Demo image: Lo-fi Tailwind CSS App/Dashboard/Admin Shell

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS App/Dashboard/Admin Shell

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Lo-fi Tailwind CSS App/Dashboard/Admin Shell - Darkmode

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS App/Dashboard/Admin Shell - Darkmode

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Lo-fi Slack UI with Tailwind CSS

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS / JS

About a code

Lo-fi Slack UI with Tailwind CSS

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

Responsive: yes

Dependencies: jquery.js

Tailwind version: 1.8.10

Demo image: Tailwind Teacher Dashboard

Author

  • Mohamed-Kaizen

Links

Made with

  • HTML / CSS

About a code

Tailwind Teacher Dashboard

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

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Messenger Clone - TailwindCSS

Author

  • ravisankarchinnam

Links

Made with

  • HTML / CSS

About a code

Messenger Clone - TailwindCSS

Responsive Facebook Messenger clone dark theme using TailwindCSS.

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

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Clone Github New Design

Author

  • Gerbi

Links

Made with

  • HTML / CSS

About a code

Clone Github New Design

Example repository new design Github with TailwindCSS.

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

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Zen Desk Clone

Author

  • codingsafari

Links

Made with

  • HTML / CSS

About a code

Zen Desk Clone

Zendesk clone. Semi responsive layout for desktop application. Dashboard/Help desk style.

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

Responsive: yes

Dependencies: -

Tailwind version: 1.3.4

Demo image: Tailwindcss Spotify Web Player Clone

Author

  • Jedidiah Avelino

Links

Made with

  • HTML / CSS

About a code

Tailwindcss Spotify Web Player Clone

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

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Youtube Clone

Author

  • shuvro_008

Links

Made with

  • HTML / CSS

About a code

Youtube Clone

A more polished Youtube clone made with Tailwind CSS.

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

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 0.3.0

Demo image: Trello Panel Clone

Author

  • killgt

Links

Made with

  • HTML / CSS

About a code

Trello Panel Clone

A Trello panel clone for TailwindCSS.

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

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0

Demo image: Github Profile Clone

Author

  • andy_huggins

Links

Made with

  • HTML / CSS

About a code

Github Profile Clone

A Github profile clone made with Tailwind. The activity feed is just an image, then there are just a few custom styles, everything else is standard Tailwind.

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

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0

Demo image: Coinbase Clone

Author

  • adamwathan

Links

Made with

  • HTML / CSS

About a code

Coinbase Clone

Coinbase clone made with default TailwindCSS config and with no extra CSS.

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

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0