TailAdmin

https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template
Admin
Free and Open-source Tailwind CSS Dashboard Admin Template that comes with all essential dashboard...
Tokens:28,623
Snippets:430
Trust Score:7
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install TailAdmin Template

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Clone the repository and install dependencies to begin project setup.

```bash
git clone https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template.git
cd tailadmin-free-tailwind-dashboard-template
npm install
```

--------------------------------

### Responsive Class Examples

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Examples of applying responsive prefixes to layout and sizing classes.

```css
w-full md:w-1/2 lg:w-1/3    /* Full width, 50% at md, 33% at lg */
hidden lg:block              /* Hidden, visible at lg */
grid-cols-1 md:grid-cols-2   /* 1 column, 2 at md */
```

--------------------------------

### Start the Development Server

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/README.md

Launch the local development environment to preview the dashboard.

```bash
npm run start
# or
yarn start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/README.md

Install the required packages using either npm or yarn.

```bash
npm install
# or
yarn install
```

--------------------------------

### Install New Dependencies

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Use npm to add packages to the project.

```bash
npm install [package]
```

--------------------------------

### Run Development Server

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Start the local development server on port 3000.

```bash
npm run start   # Start dev server on http://localhost:3000
```

--------------------------------

### Start Development Server

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Launches the local development environment with hot module reloading.

```bash
npm run start
```

--------------------------------

### Local Development Commands

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Commands to initialize the project and start the development server with hot reloading.

```bash
npm install          # Install dependencies once
npm run start        # Start dev server (auto-opens browser)
```

--------------------------------

### URL Routing Examples

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PAGES_REFERENCE.md

Standard URL access patterns for pages after building the project.

```text
http://localhost:3000/index.html
http://localhost:3000/alerts.html
http://localhost:3000/calendar.html
http://localhost:3000/form-elements.html
etc.
```

--------------------------------

### GitHub Actions CI Workflow

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Example YAML configuration for automating builds and tests on every push.

```yaml
name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm install
      - run: npm run build
      - run: npm test  # If tests exist
```

--------------------------------

### Tailwind Configuration Extension

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Example of how to extend theme colors and spacing in tailwind.config.js.

```javascript
module.exports = {
  theme: {
    colors: {
      primary: {
        50: '#...',
        100: '#...',
        // ... through 900
      },
      // ... other colors
    },
    spacing: {
      45: '11.25rem',
      77: '19.25rem',
    }
  }
}
```

--------------------------------

### Change Development Port

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Starts the development server on a different port if 3000 is occupied.

```bash
npm run start -- --port 3001
```

--------------------------------

### Create Production Build

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Generate an optimized production build in the ./build/ directory.

```bash
npm run build   # Creates optimized build in ./build/
```

--------------------------------

### Initialize Alpine.js

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Configures Alpine.js with the persist plugin and makes it globally available.

```javascript
Alpine.plugin(persist);
window.Alpine = Alpine;
Alpine.start();
```

--------------------------------

### Configure Webpack Development Server

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Sets up the local development server with hot module replacement and compression.

```javascript
devServer: {
  static: {
    directory: path.join(__dirname, "./build")
  },
  compress: true,
  port: 3000,
  hot: true
}
```

--------------------------------

### Execute Production Build

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Compiles and optimizes the project assets for production deployment.

```bash
npm run build
```

--------------------------------

### Production Build Command

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Generates an optimized production build in the ./build/ directory.

```bash
npm run build        # Create optimized build in ./build/
```

--------------------------------

### Clone the TailAdmin Repository

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/README.md

Use this command to download the project source code to your local machine.

```bash
git clone https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template.git
```

--------------------------------

### Project Configuration Files

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/INDEX.md

Lists the primary configuration files used in the project build and development process.

```text
webpack.config.js
postcss.config.js
package.json
.prettierrc
```

--------------------------------

### View Project Directory Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

Displays the file organization for the TailAdmin template, highlighting key HTML files for various components and pages.

```text
src/
├── index.html              (eCommerce dashboard)
├── alerts.html             (Alert components showcase)
├── avatars.html            (Avatar styles)
├── badge.html              (Badge styles)
├── bar-chart.html          (Bar chart example)
├── basic-tables.html       (Table examples)
├── blank.html              (Empty template)
├── buttons.html            (Button styles)
├── calendar.html           (Full calendar page)
├── form-elements.html      (Form inputs)
├── images.html             (Image galleries)
├── line-chart.html         (Line chart example)
├── 404.html                (Error page)
└── ...more pages
```

--------------------------------

### Configure Asset File Handling

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Handles image and font assets by copying them to the output directory.

```javascript
{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: "asset/resource"
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: "asset/resource"
}
```

--------------------------------

### Define Build and Development Scripts

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PROJECT_OVERVIEW.md

Use these scripts in package.json to manage the development server, production builds, and code formatting.

```json
{
  "start": "webpack serve --open --config webpack.config.js",
  "build": "webpack --config webpack.config.js",
  "sort": "npx prettier --write src"
}
```

--------------------------------

### Project Build Output Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/INDEX.md

Shows the structure of the generated files in the build directory.

```text
build/
├── index.html
├── [all other pages].html
├── bundle.js
├── style.css
├── favicon.ico
└── images/
```

--------------------------------

### Configure Dropzone for File Uploads

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Initializes a Dropzone instance on a specific element. Requires the Dropzone library to be loaded in the environment.

```javascript
let myDropzone = new Dropzone("#demo-upload", { url: "/file/post" });
```

--------------------------------

### Code Formatting Command

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Runs Prettier to organize imports, sort Tailwind classes, and fix whitespace.

```bash
npm run sort         # Format all files with Prettier
```

--------------------------------

### View Partial File Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

Displays the directory hierarchy of HTML partials within the project source.

```text
src/partials/
├── alert/
│   ├── alert-error.html
│   ├── alert-info.html
│   ├── alert-success.html
│   └── alert-warning.html
├── avatar/
│   ├── avatar-01.html
│   ├── avatar-02.html
│   ├── avatar-03.html
│   └── avatar-04.html
├── badge/
│   ├── badge-01.html through badge-06.html
├── buttons/
│   ├── button-01.html through button-06.html
├── chart/
│   ├── chart-01.html
│   ├── chart-02.html
│   └── chart-03.html
├── grid-image/
│   ├── image-01.html
│   ├── image-02.html
│   └── image-03.html
├── table/
│   ├── table-01.html
│   └── table-06.html
├── video/
│   ├── video-01.html through video-04.html
├── metric-group/
│   └── metric-group-01.html
├── profile/
│   ├── profile-address-modal.html
│   └── profile-info-modal.html
├── common-grid-shape.html
├── common-social-links.html
├── breadcrumb.html
├── calendar-event-modal.html
├── datepicker.html
├── header.html
├── media-card.html
├── overlay.html
├── preloader.html
├── sidebar.html
├── top-card-group.html
├── upcoming-schedule.html
├── watchlist.html
└── map-01.html
```

--------------------------------

### Responsive Video Container

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

Creates a 16:9 aspect ratio container for iframes using a padding-bottom hack.

```html
<div class="relative w-full overflow-hidden bg-black rounded-md" style="padding-bottom: 56.25%;">
  <iframe
    class="absolute top-0 left-0 w-full h-full"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>
```

--------------------------------

### Project Directory Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Overview of the project file organization including source code, assets, and configuration files.

```text
tailadmin/
├── src/
│   ├── js/
│   │   ├── index.js                    # Main entry point
│   │   └── components/
│   │       ├── charts/                 # ApexCharts configurations
│   │       ├── calendar-init.js        # FullCalendar setup
│   │       ├── map-01.js               # jsVectorMap setup
│   │       └── image-resize.js         # Pane resize utility
│   ├── css/
│   │   └── style.css                   # Custom styles and Tailwind directives
│   ├── images/                         # Static assets
│   ├── index.html                      # Main dashboard page
│   ├── [page].html                     # Component demo pages
│   └── partials/                       # Reusable HTML components
│       ├── header.html
│       ├── sidebar.html
│       ├── alert/, avatar/, badge/, button/, chart/, etc.
│       └── [component].html
├── webpack.config.js                   # Webpack bundler config
├── postcss.config.js                   # PostCSS setup
├── package.json                        # Dependencies and scripts
└── .prettierrc                         # Code formatting config
```

--------------------------------

### Set Build Mode

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Defines the environment mode for the build process.

```javascript
mode: "development"
```

--------------------------------

### Initialize Dropzone File Upload

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Attaches Dropzone functionality to elements with the demo-upload ID.

```javascript
const dropzoneArea = document.querySelectorAll("#demo-upload");
if (dropzoneArea.length) {
  let myDropzone = new Dropzone("#demo-upload", { url: "/file/post" });
}
```

--------------------------------

### Resolve Build Failures

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Commands to clean and reinstall dependencies when the build process fails.

```bash
rm -rf node_modules
npm install
npm run build
```

--------------------------------

### Include Common Components

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PAGES_REFERENCE.md

Standard pattern for including partials like preloader, sidebar, and header across pages.

```html
<!-- Every page includes -->
<include src="./partials/preloader.html"></include>
<include src="./partials/sidebar.html"></include>
<include src="./partials/overlay.html" />
<include src="./partials/header.html" />

<!-- Page-specific includes inside <main> -->
<include src="./partials/metric-group/metric-group-01.html" />
<include src="./partials/chart/chart-01.html" />
<!-- etc. -->
```

--------------------------------

### Define Webpack Entry Point

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Specifies the primary entry file for the application bundle.

```javascript
entry: "./src/js/index.js"
```

--------------------------------

### Dark Mode Implementation

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

HTML structure demonstrating the use of the dark: prefix for theme-aware components.

```html
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">Text</p>
  <div class="border-gray-200 dark:border-gray-800">Border</div>
</div>
```

--------------------------------

### Initialize Image Resize DOM Elements

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Required HTML structure for the image resize module to function. Ensure the pane and ghostpane elements are present in the DOM.

```html
<div id="pane" style="position: absolute; width: 400px; height: 300px;">
  <!-- Content here -->
</div>
<div id="ghostpane" style="position: fixed; display: none;"></div>
```

--------------------------------

### Implement Media Card Component

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

Displays an image with a title and description inside a styled card container.

```html
<div class="rounded-md border border-gray-200 bg-white overflow-hidden dark:border-gray-800 dark:bg-gray-900">
  <img src="./images/media.jpg" alt="Media" class="w-full h-48 object-cover" />
  <div class="p-4">
    <h3 class="font-medium text-gray-900 dark:text-white">Title</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400">Description</p>
  </div>
</div>
```

--------------------------------

### Implement Custom Dropzone Upload Handler

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Provides advanced configuration including file size limits, allowed file types, and event listeners for upload lifecycle hooks.

```javascript
const dropzoneArea = document.querySelectorAll("#demo-upload");

if (dropzoneArea.length) {
  const myDropzone = new Dropzone("#demo-upload", {
    url: "/file/post",
    maxFilesize: 10,  // MB
    acceptedFiles: ".pdf,.doc,.docx,.xlsx",
    init: function() {
      this.on("success", function(file, response) {
        console.log("File uploaded:", response.fileId);
        // Handle successful upload
      });
      this.on("error", function(file, errorMessage) {
        console.error("Upload failed:", errorMessage);
        // Handle error
      });
      this.on("complete", function(file) {
        // Cleanup
      });
    }
  });
}
```

--------------------------------

### Integrate WebSockets

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Establish a WebSocket connection to handle real-time notifications and data updates.

```javascript
const ws = new WebSocket("wss://api.example.com/notifications");

ws.addEventListener("message", (event) => {
  const { type, data } = JSON.parse(event.data);
  
  if (type === "notification") {
    // Update notification count
    // Show toast/alert
  }
  
  if (type === "chart-update") {
    // Update chart with new data
    // chart01.updateSeries([{ data: data.sales }]);
  }
});
```

--------------------------------

### Implement Grid Systems

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Classes for defining grid columns and spanning behavior in CSS grid layouts.

```css
grid          /* display: grid */
grid-cols-1   /* grid-template-columns: repeat(1, minmax(0, 1fr)) */
grid-cols-2   /* repeat(2, minmax(0, 1fr)) */
grid-cols-3   /* repeat(3, minmax(0, 1fr)) */
grid-cols-4   /* repeat(4, minmax(0, 1fr)) */
grid-cols-12  /* repeat(12, minmax(0, 1fr)) */
col-span-1    /* grid-column: span 1 */
col-span-5    /* grid-column: span 5 */
col-span-7    /* grid-column: span 7 */
col-span-12   /* grid-column: span 12 */
```

--------------------------------

### Project Directory Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PROJECT_OVERVIEW.md

Overview of the source code organization, including JavaScript components, CSS styles, and HTML partials.

```text
├── src/
│   ├── js/
│   │   ├── index.js                 (Main entry point)
│   │   └── components/
│   │       ├── charts/              (ApexCharts configurations)
│   │       ├── calendar-init.js     (FullCalendar initialization)
│   │       ├── map-01.js            (jsVectorMap initialization)
│   │       └── image-resize.js      (Pane resizing utility)
│   ├── css/
│   │   └── style.css                (Custom styles)
│   ├── index.html                   (Main dashboard page)
│   ├── *.html                       (Component demo pages)
│   ├── partials/                    (Reusable HTML components)
│   │   ├── header.html
│   │   ├── sidebar.html
│   │   ├── alert/
│   │   ├── avatar/
│   │   ├── badge/
│   │   ├── buttons/
│   │   ├── chart/
│   │   ├── table/
│   │   └── ...
│   └── images/                      (Static assets)
├── webpack.config.js                (Webpack configuration)
├── package.json                     (Dependencies and scripts)
├── postcss.config.js                (PostCSS configuration)
└── .prettierrc                      (Code formatting rules)
```

--------------------------------

### Global Page State Initialization

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/ALPINE_COMPONENTS.md

Defines the root x-data object on the body element to manage global UI states like dark mode and sidebar visibility.

```javascript
x-data="{
  page: 'pageName',           // Current page identifier
  'loaded': true,             // Page load state
  'darkMode': false,          // Dark mode toggle
  'stickyMenu': false,        // Sticky menu state
  'sidebarToggle': false,     // Sidebar visibility
  'scrollTop': false          // Scroll position tracker
}"
x-init="
  darkMode = JSON.parse(localStorage.getItem('darkMode'));
  $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))
"
:class="{'dark bg-gray-900': darkMode === true}"
```

--------------------------------

### Initialize Flatpickr Date Picker

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Configures the date picker with range mode and custom formatting.

```javascript
flatpickr(".datepicker", {
  mode: "range",
  static: true,
  monthSelectorType: "static",
  dateFormat: "M j",
  defaultDate: [new Date().setDate(new Date().getDate() - 6), new Date()],
  prevArrow: /* SVG arrow */"...",
  nextArrow: /* SVG arrow */"...",
  onReady: (selectedDates, dateStr, instance) => { ... },
  onChange: (selectedDates, dateStr, instance) => { ... },
});
```

--------------------------------

### chart01()

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Initializes and renders a bar chart component for sales data visualization.

```APIDOC
## chart01()

### Description
Renders a bar chart to the DOM element with id `#chartOne` using ApexCharts. It displays sales data across 12 months.

### Signature
`chart01(): void`

### Behavior
- Target Element: `#chartOne`
- Height: 180px
- Color: `#465fff`
- Data: 12-month sales series

### Usage Example
```javascript
chart01();
```
```

--------------------------------

### Set Build Target

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Specifies the target environment to resolve compatibility issues.

```javascript
target: "web"
```

--------------------------------

### Include HTML Partial

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

Syntax for including partial files into main templates using the custom include tag.

```html
<include src="./partials/header.html"></include>
```

```html
<include src="./partials/header.html" />
```

--------------------------------

### File Upload Container

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/ALPINE_COMPONENTS.md

Requires Dropzone initialization in src/js/index.js to handle file uploads via drag-and-drop or click.

```html
<div id="demo-upload"></div>
```

--------------------------------

### Implement Bar Chart Container

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

A wrapper for bar charts with a header and fixed height container.

```html
<div class="rounded-md border border-gray-200 bg-white p-5.5 dark:border-gray-800 dark:bg-gray-900">
  <div class="flex items-center justify-between mb-5">
    <h4 class="text-lg font-medium text-gray-900 dark:text-white">Sales Overview</h4>
  </div>
  <div id="chartOne" class="w-full h-45"></div>
</div>
```

--------------------------------

### Standard Page HTML Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PAGES_REFERENCE.md

The base template includes Alpine.js data initialization for theme and layout state, along with modular include tags for partials.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Page Title | TailAdmin - Tailwind CSS Admin Dashboard Template</title>
  </head>
  <body
    x-data="{ 
      page: 'pageId', 
      'loaded': true, 
      'darkMode': false, 
      'stickyMenu': false, 
      'sidebarToggle': false, 
      'scrollTop': false 
    }"
    x-init="
      darkMode = JSON.parse(localStorage.getItem('darkMode'));
      $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))
    "
    :class="{'dark bg-gray-900': darkMode === true}"
  >
    <!-- Preloader -->
    <include src="./partials/preloader.html"></include>

    <!-- Page Wrapper -->
    <div class="flex h-screen overflow-hidden">
      <!-- Sidebar Navigation -->
      <include src="./partials/sidebar.html"></include>

      <!-- Content Area -->
      <div class="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
        <!-- Mobile Overlay -->
        <include src="./partials/overlay.html" />

        <!-- Header -->
        <include src="./partials/header.html" />

        <!-- Main Content -->
        <main>
          <div class="p-4 mx-auto max-w-2xl md:p-6">
            <div class="grid grid-cols-12 gap-4 md:gap-6">
              <!-- Page-specific content -->
            </div>
          </div>
        </main>
      </div>
    </div>
  </body>
</html>
```

--------------------------------

### Implement Content Grid System

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PAGES_REFERENCE.md

Utilize the 12-column Tailwind grid for responsive layouts, defaulting to full width on mobile and custom splits on desktop.

```html
<div class="grid grid-cols-12 gap-4 md:gap-6">
  <div class="col-span-12 space-y-6 xl:col-span-7">
    <!-- Left column (7 cols on XL) -->
  </div>
  <div class="col-span-12 xl:col-span-5">
    <!-- Right column (5 cols on XL) -->
  </div>
  <div class="col-span-12">
    <!-- Full width -->
  </div>
</div>
```

--------------------------------

### Generate HTML Plugins

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Dynamically creates HtmlWebpackPlugin instances for all HTML files in the source directory.

```javascript
const generateHTMLPlugins = () =>
  glob.sync("./src/*.html").map((dir) => {
    const filename = path.basename(dir);

    if (filename !== "404.html") {
      paths.push(filename);
    }

    return new HtmlWebpackPlugin({
      filename,
      template: `./src/${filename}`,
      favicon: `./src/images/favicon.ico`,
      inject: "body"
    });
  });
```

--------------------------------

### Format Code

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/README.md

Execute Prettier and Tailwind class sorting to maintain code consistency.

```bash
npm run sort    # Format code with Prettier and sort Tailwind classes
```

--------------------------------

### Width Utility Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Width and max-width utilities for sizing elements.

```css
w-full     /* width: 100% */
w-1/2      /* width: 50% */
w-1/3      /* width: 33.333% */
w-2/3      /* width: 66.667% */
w-3/4      /* width: 75% */
w-3        /* width: 0.75rem */
w-4        /* width: 1rem */
w-5        /* width: 1.25rem */
w-10       /* width: 2.5rem */
w-11       /* width: 2.75rem */
w-24       /* width: 6rem */
w-64       /* width: 16rem */
max-w-10   /* max-width: 2.5rem */
max-w-2xl  /* max-width: 42rem */
max-w-none /* max-width: none */
```

--------------------------------

### POST /file/post

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Handles binary file uploads via multipart/form-data. This endpoint is designed to be used with the Dropzone library.

```APIDOC
## POST /file/post

### Description
Handles binary file uploads. Designed for integration with Dropzone.js.

### Method
POST

### Endpoint
/file/post

### Parameters
#### Request Body
- **file** (binary) - Required - The file data to be uploaded.

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the upload was successful.
- **fileId** (string) - Unique identifier for the uploaded file.
- **filename** (string) - The name of the uploaded file.
- **size** (number) - The size of the file in bytes.
- **uploadedAt** (string) - ISO 8601 timestamp of the upload.

### Response Example
{
  "success": true,
  "fileId": "abc123",
  "filename": "upload.pdf",
  "size": 1024,
  "uploadedAt": "2026-08-12T10:30:00Z"
}
```

--------------------------------

### Implement Radial Chart Container

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

A wrapper for radial charts with a simple header.

```html
<div class="rounded-md border border-gray-200 bg-white p-5.5 dark:border-gray-800 dark:bg-gray-900">
  <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-5">Completion Rate</h4>
  <div id="chartTwo" class="w-full"></div>
</div>
```

--------------------------------

### Chart 01 Usage

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Initialization call for the bar chart component.

```javascript
// Already imported and initialized in src/js/index.js
chart01(); // Renders chart to DOM element #chartOne
```

--------------------------------

### Configure Webpack Build Output

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Defines the output directory, bundle filename, and asset handling for the build process.

```javascript
output: {
  filename: "bundle.js",
  path: path.resolve(__dirname, "build"),
  clean: true,
  assetModuleFilename: "[path][name][ext]"
}
```

--------------------------------

### Initialize Map Component

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Call this function to render the map into the DOM element with ID #mapOne.

```javascript
map01(); // Renders map to DOM element #mapOne
```

--------------------------------

### SEO Meta Tags and Configuration

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/PAGES_REFERENCE.md

Standard SEO elements including title tags, viewport settings, and favicon links.

```html
<title>Page Name | TailAdmin - Tailwind CSS Admin Dashboard Template</title>
```

```html
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

```html
<link rel="icon" href="./images/favicon.ico" />
```

--------------------------------

### Configure Flexbox Layouts

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Utility classes for managing flex direction, alignment, justification, and spacing within flex containers.

```css
flex-row      /* flex-direction: row (default) */
flex-col      /* flex-direction: column */
flex-wrap     /* flex-wrap: wrap */
flex-1        /* flex: 1 1 0% */
items-start   /* align-items: flex-start */
items-center  /* align-items: center */
items-end     /* align-items: flex-end */
justify-start /* justify-content: flex-start */
justify-center/* justify-content: center */
justify-end   /* justify-content: flex-end */
justify-between/* justify-content: space-between */
gap-1         /* gap: 0.25rem */
gap-2         /* gap: 0.5rem */
gap-3         /* gap: 0.75rem */
gap-4         /* gap: 1rem */
gap-6         /* gap: 1.5rem */
-space-x-2   /* Negative margin on child (overlap) */
```

--------------------------------

### Implement Copy to Clipboard Utility

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Handles clipboard write operations and provides visual feedback on the UI.

```javascript
document.addEventListener("DOMContentLoaded", () => {
  const copyInput = document.getElementById("copy-input");
  if (copyInput) {
    const copyButton = document.getElementById("copy-button");
    const copyText = document.getElementById("copy-text");
    const websiteInput = document.getElementById("website-input");

    copyButton.addEventListener("click", () => {
      navigator.clipboard.writeText(websiteInput.value).then(() => {
        copyText.textContent = "Copied";
        setTimeout(() => {
          copyText.textContent = "Copy";
        }, 2000);
      });
    });
  }
});
```

--------------------------------

### Configure HTML Loader

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Processes HTML files using a custom preprocessor for include tags.

```javascript
{
  test: /\.html$/,
  loader: "html-loader",
  options: {
    preprocessor: processNestedHtml
  }
}
```

--------------------------------

### Configure Base URL

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Dynamically set the API base URL based on the current environment variable.

```javascript
// src/config.js
const API_BASE = process.env.NODE_ENV === "production"
  ? "https://api.example.com"
  : "http://localhost:3001";

class API {
  static async request(endpoint, options = {}) {
    return fetch(`${API_BASE}${endpoint}`, options);
  }
}
```

--------------------------------

### Implement Common Table Structure

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

A standard table layout with header and body rows, styled for dark mode compatibility.

```html
<div class="rounded-md border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <table class="w-full">
    <thead class="border-b border-gray-200 dark:border-gray-800">
      <tr>
        <th class="px-4 py-4 text-left font-medium text-gray-900 dark:text-white">Column</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <td class="px-4 py-5 text-sm text-gray-700 dark:text-gray-300">Data</td>
      </tr>
    </tbody>
  </table>
</div>
```

--------------------------------

### Configure FullCalendar Instance

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Defines the configuration object for initializing the FullCalendar component, including plugins, toolbar settings, and event handlers.

```javascript
{
  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
  selectable: true,
  initialView: "dayGridMonth",
  initialDate: "YYYY-MM-07",  // 7th of current month
  headerToolbar: {
    left: "prev,next addEventButton",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay"
  },
  events: calendarEventsList,
  select: calendarSelect,
  eventClick: calendarEventClick,
  dateClick: calendarAddEvent
}
```

--------------------------------

### Implement Server-Sent Events (SSE)

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Use EventSource to listen for server-pushed events, including custom event types and error handling.

```javascript
const eventSource = new EventSource("/api/live/events");

eventSource.addEventListener("chart-update", (event) => {
  const data = JSON.parse(event.data);
  // Update chart
});

eventSource.addEventListener("error", () => {
  console.error("Connection lost");
  eventSource.close();
});
```

--------------------------------

### Implement Datepicker Input

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

Provides an input field for the Flatpickr date picker library. Requires initialization in the main JavaScript file.

```html
<input type="text" class="datepicker" placeholder="Select date range" />
```

--------------------------------

### Metric Group Component

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

A responsive grid layout for displaying key performance metrics with trend indicators.

```html
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
  <div class="rounded-md border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm font-medium text-gray-500">Total Sales</p>
        <p class="text-2xl font-bold text-gray-900 dark:text-white">$12,345</p>
      </div>
      <div class="text-success-500">+12.5%</div>
    </div>
  </div>
  <!-- More metric cards -->
</div>
```

--------------------------------

### Shadow Utility Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Utility classes for applying box shadows.

```css
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-theme-xs
shadow-theme-md
shadow-theme-lg
```

--------------------------------

### Implement Login Flow with Fetch API

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Handles form submission by sending credentials to an authentication endpoint and storing the returned token in localStorage.

```javascript
// src/login.html - hypothetical
document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  
  const email = document.querySelector("[name='email']").value;
  const password = document.querySelector("[name='password']").value;
  
  const response = await fetch("/api/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password })
  });
  
  if (response.ok) {
    const { token } = await response.json();
    localStorage.setItem("authToken", token);
    window.location.href = "index.html";
  } else {
    console.error("Login failed");
  }
});
```

--------------------------------

### Animation and Transition Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Utility classes for animations, transitions, and easing functions.

```css
animate-spin   /* Rotating spinner */
animate-ping   /* Pulsing notification dot */
transition     /* Enable transitions */
transition-colors
duration-200
duration-300
ease-in
ease-out
ease-in-out
```

--------------------------------

### Height Utility Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Height and min-height utilities, including custom height values.

```css
h-full     /* height: 100% */
h-1/2      /* height: 50% */
h-2        /* height: 0.5rem */
h-2.5      /* height: 0.625rem */
h-3        /* height: 0.75rem */
h-5        /* height: 1.25rem */
h-10       /* height: 2.5rem */
h-11       /* height: 2.75rem */
h-12       /* height: 3rem */
h-40       /* height: 10rem */
h-45       /* height: 11.25rem (custom) */
h-48       /* height: 12rem */
h-77       /* height: 19.25rem (custom) */
h-screen   /* height: 100vh */
min-h-screen/* min-height: 100vh */
```

--------------------------------

### Configure Search Input Focus Handlers

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Enables search input focus via button click or keyboard shortcuts (Cmd/Ctrl+K or /).

```javascript
document.addEventListener("DOMContentLoaded", function () {
  const searchInput = document.getElementById("search-input");
  const searchButton = document.getElementById("search-button");

  function focusSearchInput() {
    searchInput.focus();
  }

  searchButton.addEventListener("click", focusSearchInput);
  
  // Cmd+K (Mac) or Ctrl+K (Windows/Linux)
  document.addEventListener("keydown", function (event) {
    if ((event.metaKey || event.ctrlKey) && event.key === "k") {
      event.preventDefault();
      focusSearchInput();
    }
  });

  // "/" key
  document.addEventListener("keydown", function (event) {
    if (event.key === "/" && document.activeElement !== searchInput) {
      event.preventDefault();
      focusSearchInput();
    }
  });
});
```

--------------------------------

### Implement API Request Wrapper

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

A static class wrapper for fetch that handles JSON headers, authentication tokens, and basic error checking.

```javascript
class API {
  static async request(endpoint, options = {}) {
    const token = localStorage.getItem("authToken");
    
    const response = await fetch(endpoint, {
      headers: {
        "Content-Type": "application/json",
        ...(token && { "Authorization": `Bearer ${token}` })
      },
      ...options
    });
    
    if (!response.ok) {
      throw new Error(`API Error: ${response.status}`);
    }
    
    return response.json();
  }
  
  static get(endpoint) {
    return this.request(endpoint);
  }
  
  static post(endpoint, data) {
    return this.request(endpoint, {
      method: "POST",
      body: JSON.stringify(data)
    });
  }
  
  static patch(endpoint, data) {
    return this.request(endpoint, {
      method: "PATCH",
      body: JSON.stringify(data)
    });
  }
  
  static delete(endpoint) {
    return this.request(endpoint, {
      method: "DELETE"
    });
  }
}

// Usage
const data = await API.get("/api/dashboard");
await API.post("/api/calendar/events", { title: "Event" });
```

--------------------------------

### Custom Tailwind Shadow Extensions

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Custom shadow utilities available in the theme.

```text
shadow-theme-xs
shadow-theme-md
shadow-theme-lg
```

--------------------------------

### Tailwind Responsive Breakpoints

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Standard breakpoint prefixes for responsive design.

```text
sm: (640px)
md: (768px)
lg: (1024px)
xl: (1280px)
2xl: (1536px)
```

--------------------------------

### Import Dependencies in index.js

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Imports CSS assets and JavaScript libraries required for the application.

```javascript
import "jsvectormap/dist/jsvectormap.min.css";
import "flatpickr/dist/flatpickr.min.css";
import "dropzone/dist/dropzone.css";
import "../css/style.css";

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";
import flatpickr from "flatpickr";
import Dropzone from "dropzone";

import chart01 from "./components/charts/chart-01";
import chart02 from "./components/charts/chart-02";
import chart03 from "./components/charts/chart-03";
import map01 from "./components/map-01";
import "./components/calendar-init.js";
import "./components/image-resize";
```

--------------------------------

### Map Configuration Object

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Configuration object defining the map selector, styles, markers, and tooltip behavior.

```javascript
{
  selector: "#mapOne",
  map: "world",
  zoomButtons: false,
  regionStyle: {
    initial: { fill: "#D9D9D9" },
    hover: { fill: "#465fff", fillOpacity: 1 }
  },
  markers: [
    { name: "Egypt", coords: [26.8206, 30.8025] },
    { name: "United Kingdom", coords: [55.3781, 3.436] },
    { name: "United States", coords: [37.0902, -95.7129] }
  ],
  markerStyle: {
    initial: { fill: "#465fff", r: 4, strokeWidth: 1 },
    hover: { fill: "#465fff", fillOpacity: 1 }
  },
  onRegionTooltip: (tooltip, code) => {
    if (code === "EG") tooltip.selector.innerHTML += " (Hello Russia)";
  }
}
```

--------------------------------

### Configure Build Statistics

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Sets the verbosity level for console logging during the build.

```javascript
stats: "errors-only"
```

--------------------------------

### Initialize Charts on DOMContentLoaded

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Triggers chart and map rendering functions once the DOM is fully loaded.

```javascript
document.addEventListener("DOMContentLoaded", () => {
  chart01();
  chart02();
  chart03();
  map01();
});
```

--------------------------------

### Standard Component Architecture Pattern

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/ALPINE_COMPONENTS.md

The recommended pattern for self-contained component logic, event handling, and state management.

```javascript
x-data="{ stateProp: initialValue }"
@click.outside="closeBehavior"
@click="toggleBehavior = !toggleBehavior"
```

--------------------------------

### PostCSS Configuration Placeholder

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Note regarding the integration of Tailwind CSS v4 with PostCSS.

```javascript
// Content not provided, but webpack uses Tailwind v4 with PostCSS
// Tailwind CSS v4 integrates PostCSS automatically
```

--------------------------------

### Responsive Breakpoint Prefixes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Standard Tailwind CSS responsive breakpoints used for conditional styling based on screen width.

```css
sm:      /* >= 640px */
md:      /* >= 768px */
lg:      /* >= 1024px */
xl:      /* >= 1280px */
2xl:     /* >= 1536px */
```

--------------------------------

### Opacity Utility Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Utility classes for setting element opacity.

```css
opacity-50
opacity-75
opacity-100
```

--------------------------------

### chart02()

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Initializes and renders a radial bar (gauge) chart component.

```APIDOC
## chart02()

### Description
Renders a radial/gauge chart to the DOM element with id `#chartTwo` for progress visualization.

### Signature
`chart02(): void`

### Behavior
- Target Element: `#chartTwo`
- Height: 330px
- Style: Semicircle (-90° to +90°)
- Value: 75.55%

### Usage Example
```javascript
chart02();
```
```

--------------------------------

### Implement Area Chart Container

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/HTML_COMPONENTS.md

A wrapper for area charts with a header and specific height.

```html
<div class="rounded-md border border-gray-200 bg-white p-5.5 dark:border-gray-800 dark:bg-gray-900">
  <div class="flex items-center justify-between mb-5">
    <h4 class="text-lg font-medium text-gray-900 dark:text-white">Sales & Revenue</h4>
  </div>
  <div id="chartThree" class="w-full h-77"></div>
</div>
```

--------------------------------

### Dark Mode Persistence Patterns

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Alpine.js directives for managing dark mode state via localStorage, with an optional variant for backend synchronization.

```javascript
x-init="
  darkMode = JSON.parse(localStorage.getItem('darkMode'));
  $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))
"
```

```javascript
x-init="
  darkMode = JSON.parse(localStorage.getItem('darkMode'));
  $watch('darkMode', async (value) => {
    localStorage.setItem('darkMode', JSON.stringify(value));
    
    // Sync with server
    await fetch('/api/user/preferences', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ darkMode: value })
    });
  })
"
```

--------------------------------

### Webpack DevServer Proxy Configuration

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Proxy configuration for local development to redirect API requests to a local backend server.

```javascript
// webpack.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    }
  }
}
```

--------------------------------

### Configure JavaScript Babel Loader

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Transpiles modern JavaScript files using babel-loader while excluding node_modules.

```javascript
{
  test: /\.m?js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"]
    }
  }
}
```

--------------------------------

### chart03()

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Initializes and renders an area chart component with multiple data series.

```APIDOC
## chart03()

### Description
Renders an area chart to the DOM element with id `#chartThree` displaying two series: 'Sales' and 'Revenue'.

### Signature
`chart03(): void`

### Behavior
- Target Element: `#chartThree`
- Height: 310px
- Colors: `#465FFF` (Sales), `#9CB9FF` (Revenue)
- Fill: Gradient with 0.55 opacity

### Usage Example
```javascript
chart03();
```
```

--------------------------------

### map01()

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/JAVASCRIPT_MODULES.md

Initializes and renders an interactive world map to the DOM element with the ID #mapOne.

```APIDOC
## map01()

### Description
Renders an interactive world map to the element with id `#mapOne` using jsVectorMap. The map includes preset markers for Egypt, the United Kingdom, and the United States, with custom styling and tooltip behavior.

### Signature
`map01(): void`

### Behavior
- Renders to: `#mapOne`
- Map type: World
- Zoom buttons: Disabled
- Region hover color: #465fff
- Region initial color: #D9D9D9
- Marker color: #465fff

### Usage Example
```javascript
import map01 from './path/to/map-01';

// Renders map to DOM element #mapOne
map01();
```
```

--------------------------------

### Tailwind Transition Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Utility classes for managing CSS transitions and animations.

```text
transition  (enables transitions)
duration-  (animation duration)
ease-  (easing function)
```

--------------------------------

### Padding Utility Classes

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

Padding utilities for setting internal spacing on elements.

```css
p-3    /* padding: 0.75rem */
p-4    /* padding: 1rem */
p-5    /* padding: 1.25rem */
p-5.5  /* padding: 1.375rem */
p-6    /* padding: 1.5rem */
px-3   /* padding-left/right: 0.75rem */
px-4   /* padding-left/right: 1rem */
px-4.5 /* padding-left/right: 1.125rem */
px-6   /* padding-left/right: 1.5rem */
px-7   /* padding-left/right: 1.75rem */
px-12  /* padding-left/right: 3rem */
py-2   /* padding-top/bottom: 0.5rem */
py-2.5 /* padding-top/bottom: 0.625rem */
py-3   /* padding-top/bottom: 0.75rem */
py-4   /* padding-top/bottom: 1rem */
py-5   /* padding-top/bottom: 1.25rem */
py-6   /* padding-top/bottom: 1.5rem */
pl-4   /* padding-left: 1rem */
pr-2.5 /* padding-right: 0.625rem */
pr-14  /* padding-right: 3.5rem */
pb-3   /* padding-bottom: 0.75rem */
pt-1/2 /* padding-top: 50% */
```

--------------------------------

### Load Dynamic Table Data

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/API_INTEGRATION.md

Fetches product data on page load and dynamically updates the table body content.

```javascript
document.addEventListener("DOMContentLoaded", async () => {
  const tableBody = document.querySelector("tbody");
  
  try {
    const response = await fetch("/api/products");
    const products = await response.json();
    
    const html = products.map(product => `
      <tr class="border-b border-gray-200">
        <td class="px-4 py-5 text-sm">${product.name}</td>
        <td class="px-4 py-5 text-sm">${product.category}</td>
        <td class="px-4 py-5 text-sm">$${product.price}</td>
        <td class="px-4 py-5 text-sm">${product.stock}</td>
      </tr>
    `).join("");
    
    tableBody.innerHTML = html;
  } catch (error) {
    console.error("Failed to load table data:", error);
  }
});
```

--------------------------------

### CSS Import Chain in src/js/index.js

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/CONFIGURATION_BUILD.md

Defines the order of CSS imports to ensure correct style priority, with custom styles loaded last.

```javascript
import "jsvectormap/dist/jsvectormap.min.css";
import "flatpickr/dist/flatpickr.min.css";
import "dropzone/dist/dropzone.css";
import "../css/style.css";
```

--------------------------------

### Modal Overlay Component

Source: https://github.com/tailadmin/tailadmin-free-tailwind-dashboard-template/blob/main/_autodocs/TAILWIND_CLASSES.md

A fixed full-screen overlay for modal backgrounds.

```html
<div class="fixed inset-0 z-99999 bg-black/50"></div>
```
Tokens:
Raw