Winner-TAM Tailwind Admin Template

Winner-TAM is now a standalone multi-page admin template built with Tailwind CSS v4, Vite, vanilla JavaScript, and Lucide icons. The original Bootstrap 5 dependency has been removed and the UI has been rebuilt around Tailwind utilities, shared shell rendering, runtime theme tokens, and custom interaction modules.

Highlights

• Bootstrap-free Tailwind CSS v4 admin template
• Vite-based development and production build
• Shared app shell for sidebar, topbar, footer, and settings panel
• Dark mode powered by data-theme="dark"
• Runtime accent color switching through CSS variables
• Lucide icon system instead of Font Awesome
• Custom dropdowns, offcanvas, modals, toasts, uploads, charts, and interactive UI widgets
• Native accordion, multiselect, tooltip, and rich-text editor patterns without extra UI packages
• Standalone HTML structure that can later be moved into another Laravel project

Stack

• Tailwind CSS v4
• Vite
• Vanilla JavaScript
• Lucide

Available Pages

Overview

• index.html Dashboard
• analytics.html Analytics

Workspace

• assets/pages/profile.html Profile
• assets/pages/account-settings.html Account Settings
• assets/pages/users.html Users
• assets/pages/chat.html Chat
• assets/pages/calendar.html Calendar
• assets/pages/database.html Database
• assets/pages/settings.html Workspace Settings

Page Samples

• assets/pages/blank.html Blank Page
• assets/pages/invoice.html Invoice
• assets/pages/auth/login.html Login
• assets/pages/auth/registration.html Registration
• assets/pages/errors/404.html 404

Components And UI

• assets/pages/components.html Component Library
• assets/pages/components.html#accordion Accordion
• assets/pages/components.html#multiselect Multiselect
• assets/pages/components.html#editor Text Editor
• assets/pages/components.html#tooltip Tooltip
• assets/pages/breadcrumb.html Breadcrumb
• assets/pages/icon-list.html Icon List
• assets/pages/alerts.html Alerts
• assets/pages/datatable.html Data Table
• assets/pages/modal.html Modals
• assets/pages/datepicker.html Datepicker
• assets/pages/upload.html Drag And Drop Upload
• assets/pages/flash-message.html Flash Message
• assets/pages/sweet-alert.html Sweet Alert And Toasts

Development

Install dependencies:

npm install

Start the local Vite server:

npm run dev

Create a production build:

npm run build

Preview the production build locally:

npm run preview

Project Structure

.
├── index.html
├── analytics.html
├── assets/
│   └── pages/
│       ├── account-settings.html
│       ├── alerts.html
│       ├── auth/
│       │   ├── login.html
│       │   └── registration.html
│       ├── blank.html
│       ├── breadcrumb.html
│       ├── calendar.html
│       ├── chat.html
│       ├── components.html
│       ├── database.html
│       ├── datatable.html
│       ├── datepicker.html
│       ├── errors/
│       │   └── 404.html
│       ├── flash-message.html
│       ├── icon-list.html
│       ├── invoice.html
│       ├── modal.html
│       ├── profile.html
│       ├── settings.html
│       ├── sweet-alert.html
│       ├── upload.html
│       └── users.html
├── resources/
│   ├── css/
│   │   └── app.css
│   └── js/
│       ├── app.js
│       └── modules/
│           ├── charts.js
│           ├── components.js
│           ├── fullscreen.js
│           ├── icons.js
│           ├── modals.js
│           ├── navigation.js
│           ├── page-context.js
│           ├── shell.js
│           ├── theme.js
│           ├── toasts.js
│           ├── ui.js
│           └── uploads.js
├── package.json
├── tailwind.config.js
└── vite.config.js

Theme System

• Tailwind tokens are extended in tailwind.config.js from the template CSS variable system.
• Colors like --accent, --bg, --bg-card, --text, and radius/shadow tokens are used across the UI.
• Dark mode uses darkMode: ['selector', '[data-theme="dark"]'].
• Theme persistence is handled in resources/js/modules/theme.js.
• Accent switching remains runtime-driven, so the template can be moved into another app without recompiling for every color choice.

Interaction Modules

• shell.js renders the shared topbar, sidebar, footer, and settings offcanvas.
• navigation.js builds the grouped sidebar and active states.
• ui.js handles dropdowns, sidebar behavior, submenu heights, and the settings panel.
• components.js powers the native accordion, multiselect, tooltip behaviors, and the lightweight rich-text editor.
• modals.js powers custom modal open and close behavior.
• toasts.js powers SweetAlert-style toasts and flash notifications.
• uploads.js handles drag-and-drop uploads and file previews.
• charts.js renders the dashboard and analytics chart demos.

Notes

• This repository is intentionally a standalone Vite admin template.
• The newer component demos remain dependency-light so the package stays easier to adapt for marketplace distribution and stricter review requirements.
• The structure is ready to be moved into any project later through Vite entrypoints and Blade integration.

License

This project is released under the MIT License. That allows use, modification, redistribution, and commercial use, including reuse inside client projects or marketplace submissions, as long as the copyright notice and license text are kept with the software.

See LICENSE.

Third-party packages and assets keep their own licenses. If you redistribute the full template, keep the relevant notices for dependencies such as Tailwind CSS, Vite, Lucide, and any external fonts or assets you continue to ship.