dashboard-tailwindCSS — HTML 后台模板

SHA-256: 631686f675d1fcddebc4bfb91020411cc1cf23bb17a572fcc34861cbcfc9e334

2026-10-03T23:15:51.623Z

<h1 align="center" id="project_name">
  <br />          
    <img height="120" width="120" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" />
    <img height="120" width="120" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" />
    <img height="120" width="120" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" /> 
  <br />
</h1>

<p align="center">
 Admin Template Dashboard with Tailwind CSS.
</p>

<p align="center">
  <!-- GitHub last commit -->
  <a href="https://github.com/risaltte/dashboard-tailwindCSS/commits/master">
    <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/risaltte/dashboard-tailwindCSS?color=81D8F7">
  </a>
  <!-- GitHub language count -->
  <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/risaltte/dashboard-tailwindCSS?color=81D8F7">
  <!-- GitHub top language -->
  <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/risaltte/dashboard-tailwindCSS?color=81D8F7">
  <!-- Repository size -->
  <img alt="Repository size" src="https://img.shields.io/github/repo-size/risaltte/dashboard-tailwindCSS?color=81D8F7">
  <!-- Repository status -->
  <img src="https://www.repostatus.org/badges/latest/unsupported.svg">
  <!-- Link repo -->
  <a href="https://github.com/risaltte/dashboard-tailwindCSS/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/risaltte/dashboard-tailwindCSS?color=81D8F7" alt="License">
  </a>
</p>

<p align="center">
 <a href="#about">About</a> •
 <a href="#layout">Layout</a> • 
 <a href="#technologies">Technologies</a> • 
 <a href="#prerequisites">Prerequisites</a> •
 <a href="#demo">Demo</a> •
 <a href="#author">Autor</a> • 
 <a href="#license">License</a>
</p>

<p align="center">
  <img src=".github/img/desktop.png" alt="Layout">
</p>

<h4 align="center">
  	🚧 Admin Template Dashboard with Tailwind CSS | Done 🚧
</h4>

<h2 id="about">
💻 About
</h2>

Dashboard Template with Tailwind CSS is a dummy admin template created to apply knowledge of [Tailwindcss](https://tailwindcss.com/) and [AlpineJS](https://alpinejs.dev/). The Template is responsive and has dark mode support.

<h2 id="layout">🎨 Layout</h2>
<p>
    The layout was made from some inspirations in other dashboard templates available on the internet.
</p>

<p align="center">
  <img src=".github/img/desktop-light-1.png" alt="Layout Light">
</p>

<p align="center">
  <img src=".github/img/desktop-dark-1.png" alt="Layout Light">
</p>

<p align="center" style="display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 16px;">
  <img src=".github/img/mobile-light-1.png" width="400px" alt="Desktop Layout">

  <img src=".github/img/mobile-dark-1.png" width="400px" alt="Mobile Layout">
</p>

<p align="center" style="display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 16px;">
  <img src=".github/img/mobile-light-2.png" width="400px" alt="Desktop Layout">

  <img src=".github/img/mobile-dark-2.png" width="400px" alt="Mobile Layout">
</p>

<br />
<h2 id="technologies">🛠 Technologies</h2>

The following tools were used in the construction of the project:

- **[Tailwind](https://tailwindcss.com/)**
- **[AlpineJS](https://alpinejs.dev/)**
- **[Vite](https://vitejs.dev/)**

> See more [package.json](package.json)

**Utilities**


- Tooltips | Popover: **[TippyJS](https://tippyjs.bootcss.com/)**
- Cookie management: **[JS-Cookie](https://www.npmjs.com/package/js-cookie)**
- Icons: **[Fontawesome](https://fontawesome.com/)**

<h2 id="prerequisites">💿 How to run the project</h2>

### 🧰 Prerequisites

Before you start, you will need to have the following tools installed on your machine:

> [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/) or [Yarn](https://yarnpkg.com/) if you prefer.
> In addition it is good to have an editor to work with the code as [VSCode](https://code.visualstudio.com/)

### 🧭 Running the Project

```bash
# Clone repo
$ git clone https://github.com/risaltte/dashboard-tailwindCSS.git

# Access the project folder in the terminal/cmd
$ cd dashboard-tailwindCSS

# Install the dependencies (npm or yarn)
$ npm install

# Run the application in development mode
$ npm run dev

# see on http://localhost:5173

```

<h2 id="demo">🧪 Demo</h2>
<a href="https://dashboard-tailwind-css.vercel.app" target="_blank">
<!-- Link externo ou local(.github). -->
  <img src=".github/img/vercel_button.png">  
</a>

<h2 id="author">🦸 Autor</h2>
<a href="https://github.com/risaltte">
 <img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/38223948?v=4" width="100px;" alt="Rafael Risalte"/>
 <br />
 <sub><b>Rafael Risalte</b></sub></a>

[![Linkedin Badge](https://img.shields.io/badge/-Linkedin-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/rafaelrisalte/)](https://www.linkedin.com/in/rafaelrisalte/)
[![Gmail Badge](https://img.shields.io/badge/-Gmail-c14438?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])

<h2 id="license">📝 License</h2>

Distributed under MIT license. See [LICENSE](LICENSE) for more information.

Made with ❤️ by Rafael Risalte 👋🏽 [Contact!](https://www.linkedin.com/in/rafaelrisalte/)

[⬆ Back to top](#project_name)<br />