Midone Documentation
Source & Compiled Version
Recommend using the Source version to start
Demo Purchase Getting Support

# Introduction

## Introducing Midone TailwindCSS Admin Dashboard Template

Midone is a responsive and fully featured Admin Template powered by the utility-first CSS framework TailwindCSS 3+. If you’re a developer looking for an admin dashboard with ready-made Tailwind components, developer-friendly, and highly customizable Midone is one of the best on the market. Even if you are not familiar with the framework, template’s UI components can be easily customized without leaving the HTML code.

Midone is a unique, modern, and flexible Admin dashboard template that can be used to build Backend Applications, Information system, CRM, or even to start a new simple project and learning to use TailwindCSS. We encourage you to have a good look at live preview and discover all the themes and included features!

Thanks for purchasing Midone, Left4code Team.

# Features

## Build your dashboard application quickly with Midone

Responsive Design
Built-in Compiler
Functional Dashboard
Apps Preview
Users Preview
Easy to Customize
Useful Pages
Fast Performance
Utility Based
Clean Code & Structure
PostCSS Support
Free Lifetime Updates

# Browser Support

## Extensive browser support

Chrome
Edge
Mozilla
Opera
Safari

# Requirements

## Minimum requirements to start using the template

Please install the following requirements:

Nodejs (TailwindCSS requires nodejs version 12.13.0 or higher).

https://nodejs.org/en/

Yarn (Package manager)

https://classic.yarnpkg.com/en/docs/install

PNPM Optional* (If you don't want to use Yarn)

https://pnpm.io/installation

# Installing Dependencies

## A few steps to install the project dependencies

Dependencies are packages or third-party libraries used in the templates, including compiler to compile JS and CSS assets. If you already have met the minimum requirements, follow the steps below to install the project dependencies and run the compiler:

- Access your console, then navigate to the project's root directory.
- Run yarn install to start installing dependencies.
- After the installation is complete, run yarn run dev to run the compiler.

As long as the compiler is running any code modifications will be monitored and you don't need to run the compiler again.

# Customizing Colors

## Change the template's primary colors

The theme color configuration for this admin template now relies on CSS variables, allowing easy customization and integration with JavaScript libraries such as charts or icons. The latest update has centralized the color configuration in the "tailwind.config.js" file.

To modify the theme colors, navigate to the "tailwind.config.js" file and locate the color definitions. You can change the values directly within this file to update the entire color scheme.

Here's an example of the color configuration in the "tailwind.config.js" file:

    // Default colors
    ":root": {
        "--color-theme-1": toRGB(colors.indigo["800"]),
        "--color-theme-2": toRGB(colors.blue["900"]),
        "--color-primary": toRGB(colors.indigo["800"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
    },
    // Default dark-mode colors
    ".dark": {
        "--color-primary": toRGB(colors.blue["700"]),
        "--color-darkmode-50": "87 103 132",
        "--color-darkmode-100": "74 90 121",
        "--color-darkmode-200": "65 81 114",
        "--color-darkmode-300": "53 69 103",
        "--color-darkmode-400": "48 61 93",
        "--color-darkmode-500": "41 53 82",
        "--color-darkmode-600": "40 51 78",
        "--color-darkmode-700": "35 45 69",
        "--color-darkmode-800": "27 37 59",
        "--color-darkmode-900": "15 23 42",
    },
    // Theme 1 colors
    ".theme-1": {
        "--color-theme-1": toRGB(colors.violet["900"]),
        "--color-theme-2": toRGB(colors.rose["800"]),
        "--color-primary": toRGB(colors.violet["900"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 2 colors
    ".theme-2": {
        "--color-theme-1": toRGB(colors.purple["900"]),
        "--color-theme-2": toRGB(colors.cyan["700"]),
        "--color-primary": toRGB(colors.purple["900"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 3 colors
    ".theme-3": {
        "--color-theme-1": toRGB(colors.cyan["700"]),
        "--color-theme-2": toRGB(colors.violet["800"]),
        "--color-primary": toRGB(colors.cyan["700"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 4 colors
    ".theme-4": {
        "--color-theme-1": toRGB(colors.sky["700"]),
        "--color-theme-2": toRGB(colors.rose["800"]),
        "--color-primary": toRGB(colors.sky["700"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 5 colors
    ".theme-5": {
        "--color-theme-1": toRGB(colors.sky["800"]),
        "--color-theme-2": toRGB(colors.emerald["800"]),
        "--color-primary": toRGB(colors.sky["800"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 6 colors
    ".theme-6": {
        "--color-theme-1": toRGB("#247ba0"),
        "--color-theme-2": toRGB("#0a2463"),
        "--color-primary": toRGB("#247ba0"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 7 colors
    ".theme-7": {
        "--color-theme-1": toRGB(colors.lime["950"]),
        "--color-theme-2": toRGB(colors.teal["900"]),
        "--color-primary": toRGB(colors.lime["950"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 8 colors
    ".theme-8": {
        "--color-theme-1": toRGB("#357266"),
        "--color-theme-2": toRGB("#0E3B43"),
        "--color-primary": toRGB("#357266"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 9 colors
    ".theme-9": {
        "--color-theme-1": toRGB("#6C6C60"),
        "--color-theme-2": toRGB("#4D4D42"),
        "--color-primary": toRGB("#6C6C60"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 10 colors
    ".theme-10": {
        "--color-theme-1": toRGB("#03045e"),
        "--color-theme-2": toRGB("#0c4a6e"),
        "--color-primary": toRGB("#03045e"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 11 colors
    ".theme-11": {
        "--color-theme-1": toRGB("#2f3e46"),
        "--color-theme-2": toRGB("#52796f"),
        "--color-primary": toRGB("#2f3e46"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 12 colors
    ".theme-12": {
        "--color-theme-1": toRGB("#5e503f"),
        "--color-theme-2": toRGB("#22333b"),
        "--color-primary": toRGB("#5e503f"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 13 colors
    ".theme-13": {
        "--color-theme-1": toRGB("#5e548e"),
        "--color-theme-2": toRGB("#231942"),
        "--color-primary": toRGB("#5e548e"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 14 colors
    ".theme-14": {
        "--color-theme-1": toRGB("#02292f"),
        "--color-theme-2": toRGB("#767522"),
        "--color-primary": toRGB("#02292f"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 15 colors
    ".theme-15": {
        "--color-theme-1": toRGB("#4c956c"),
        "--color-theme-2": toRGB("#006466"),
        "--color-primary": toRGB("#4c956c"),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 16 colors
    ".theme-16": {
        "--color-theme-1": toRGB(colors.sky["900"]),
        "--color-theme-2": toRGB(colors.blue["950"]),
        "--color-primary": toRGB(colors.sky["900"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },
    // Theme 17 colors
    ".theme-17": {
        "--color-theme-1": toRGB(colors.slate["900"]),
        "--color-theme-2": toRGB(colors.slate["800"]),
        "--color-primary": toRGB(colors.slate["900"]),
        "--color-secondary": toRGB(colors.slate["200"]),
        "--color-success": toRGB(colors.teal["600"]),
        "--color-info": toRGB(colors.cyan["600"]),
        "--color-warning": toRGB(colors.yellow["600"]),
        "--color-pending": toRGB(colors.orange["700"]),
        "--color-danger": toRGB(colors.red["700"]),
        "--color-light": toRGB(colors.slate["100"]),
        "--color-dark": toRGB(colors.slate["800"]),
        "&.dark": {
            "--color-primary": toRGB(colors.sky["800"]),
        },
    },

# Build Tools

## Learn how to configure ESBuild

In the latest version of this template, we have transitioned to using ESBuild, which acts as a standalone build tool, replacing webpack. ESBuild simplifies our build tools configuration, enabling us to concentrate more on the development code. The configuration for ESBuild can now be located in the "esbuild.config.js" file.

Here's a comprehensive example of the ESBuild configuration for both development and production builds:

    ...

    // Define source and distribution paths
    const sourcePath = "src/";
    const distPath = "dist/";

    // Specify files and directories to watch
    const watchedFiles = ["./*.html"];
    const copyDirs = ["images", "json"];

    // Specify entries for JS and CSS files
    const entries = [
    // CSS Vendors
    "src/css/vendors/ckeditor.css",
    // ... (other CSS vendors)

    // CSS Themes
    "src/css/themes/dagger.css",
    // ... (other CSS themes)

    // CSS General
    "src/css/app.css",

    // JS Vendor
    "src/js/vendors/accordion.js",
    // ... (other JS vendors)

    // JS Utils
    "src/js/utils/colors.js",
    "src/js/utils/helper.js",

    // JS Pages
    "src/js/pages/landing-page.js",
    // ... (other JS pages)

    // JS Themes
    "src/js/themes/dagger.js",
    // ... (other JS themes)

    // JS Base Components
    "src/js/components/base/theme-color.js",
    // ... (other JS base components)

    // JS Components
    "src/js/components/donut-chart.js",
    // ... (other JS components)

    // JS General
    "src/js/app.js",
    ];

    ...

Feel free to explore the ESBuild configuration file and adjust it according to your project's requirements. If you have any questions or need assistance, refer to the documentation or reach out to our support team.

# Javascript Structure

## Learn javascript code structure on Midone

The JavaScript code has been reorganized into a modular structure, allowing for better readability and maintainability. Instead of importing all JavaScript files into a single entry file, each file is now separated and categorized based on its function or purpose. Here's an example of how JavaScript files are imported:

    <!-- Importing Third-Party Libraries -->
    <script type="module" src="/src/js/vendors/dom.js"></script>
    <script type="module" src="/src/js/vendors/tailwind-merge.js"></script>
    <!-- ... (other third-party libraries) -->

    <!-- Importing Base Components -->
    <script type="module" src="/src/js/components/base/theme-color.js"></script>
    <script type="module" src="/src/js/components/base/lucide.js"></script>
    <script type="module" src="/src/js/components/base/litepicker.js"></script>
    <script type="module" src="/src/js/components/base/tiny-slider.js"></script>
    <!-- ... (other base components) -->

    <!-- Importing Utilities -->
    <script type="module" src="/src/js/utils/colors.js"></script>
    <script type="module" src="/src/js/utils/helper.js"></script>
    <!-- ... (other utility files) -->

    <!-- Importing Themes -->
    <script type="module" src="/src/js/themes/viper.js"></script>
    <!-- ... (other theme files) -->

    <!-- Importing Components -->
    <script type="module" src="/src/js/components/report-line-chart.js"></script>
    <script type="module" src="/src/js/components/report-donut-chart-3.js"></script>
    <script type="module" src="/src/js/components/base/tippy.js"></script>
    <script type="module" src="/src/js/components/quick-search.js"></script>
    <!-- ... (other component files) -->

The JavaScript code is now organized into the following directories inside the js directory:

- /js/vendors: Contains third-party libraries and vendor-specific code.
- /js/components: Includes reusable components that serve specific functions.
- /js/utils: Holds utility functions and helper scripts.
- /js/themes: Contains theme-specific JavaScript code.

Each directory has its own meaning and purpose, making it easier to locate and manage specific functionalities within the project. Explore these directories to understand the structure and make modifications according to your project's requirements.

# CSS Structure

## Learn CSS code structure on Midone

Similar to the JavaScript code, the CSS assets have been organized into a modular structure, enhancing maintainability and ease of customization. CSS files are categorized based on their function or purpose, and the import structure reflects this organization. Here's an example of how CSS files are imported:

    <!-- Importing Vendor Styles -->
    <link rel="stylesheet" href="/src/css/vendors/litepicker.css">
    <link rel="stylesheet" href="/src/css/vendors/tiny-slider.css">
    <link rel="stylesheet" href="/src/css/vendors/tippy.css">
    <link rel="stylesheet" href="/src/css/vendors/simplebar.css">
    <!-- ... (other vendor styles) -->

    <!-- Importing Theme Styles -->
    <link rel="stylesheet" href="/src/css/themes/viper.css">
    <!-- ... (other theme styles) -->

    <!-- Importing Global Styles -->
    <link rel="stylesheet" href="/src/css/app.css">

The CSS code is organized into two main directories inside the css directory:

- /css/vendors: This directory contains styles related to third-party libraries and vendor-specific styling.
- /css/themes: Here, you'll find styles specific to different themes used in the template.

Additionally, the app.css file serves as the main CSS entry point, bringing together global styles such as TailwindCSS directives, font imports, and shared components needed across all template pages. Here's an example snippet from app.css:

    /*
       |--------------------------------------------------------------------------
       | Fonts
       |--------------------------------------------------------------------------
       |
       | Import all fonts used in the template, the font configuration can be
       | seen in "tailwind.config.js".
       |
       | Please check this link for more details:
       | https://tailwindcss.com/docs/theme
       |
       */
    @import "./fonts/_public-sans.css";

    /*
       |--------------------------------------------------------------------------
       | Components
       |--------------------------------------------------------------------------
       |
       | Import CSS components.
       |
       */
    @import "./components/_box.css";
    @import "./components/_global.css";
    @import "./components/_image-fit.css";
    @import "./components/_scrollbar-hidden.css";
    @import "./components/_typing-dots.css";
    @import "./components/_zoom-in.css";

    /*
     |--------------------------------------------------------------------------
     | TailwindCSS Directives
     |--------------------------------------------------------------------------
     |
     | Import TailwindCSS directives and swipe out at build-time with all of
     | the styles it generates based on your configured design system.
     |
     | Please check this link for more details:
     | https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
     |
     */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Feel free to explore these directories to understand the structure and make necessary adjustments according to your project's styling requirements.

# Accordion

## Working with built-in accordion components

These are very basic HTML structure of the accordion components, you can open the demo to check more of the other implementations.

    <div data-tw-merge class="accordion">
    <div
      data-tw-merge
      class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
    >
      <div class="accordion-header" id="faq-accordion-1">
        <button
          data-tw-merge
          data-tw-toggle="collapse"
          data-tw-target="#faq-accordion-1-collapse"
          type="button"
          aria-expanded="true"
          aria-controls="faq-accordion-1-collapse"
          class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300"
        >
          OpenSSL Essentials: Working with SSL Certificates, Private
          Keys
        </button>
      </div>
      <div
        id="faq-accordion-1-collapse"
        aria-labelledby="faq-accordion-1"
        class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible show"
      >
        <div
          data-tw-merge
          class="leading-relaxed accordion-body text-slate-600 dark:text-slate-500"
        >
          Lorem Ipsum is simply dummy text of the printing and
          typesetting industry. Lorem Ipsum has been the industry's
          standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a
          type specimen book. It has survived not only five
          centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged.
        </div>
      </div>
    </div>
    <div
      data-tw-merge
      class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
    >
      <div class="accordion-header" id="faq-accordion-2">
        <button
          data-tw-merge
          data-tw-toggle="collapse"
          data-tw-target="#faq-accordion-2-collapse"
          type="button"
          aria-expanded="true"
          aria-controls="faq-accordion-2-collapse"
          class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
        >
          Understanding IP Addresses, Subnets, and CIDR Notation
        </button>
      </div>
      <div
        id="faq-accordion-2-collapse"
        aria-labelledby="faq-accordion-2"
        class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
      >
        <div
          data-tw-merge
          class="leading-relaxed accordion-body text-slate-600 dark:text-slate-500"
        >
          Lorem Ipsum is simply dummy text of the printing and
          typesetting industry. Lorem Ipsum has been the industry's
          standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a
          type specimen book. It has survived not only five
          centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged.
        </div>
      </div>
    </div>
    <div
      data-tw-merge
      class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
    >
      <div class="accordion-header" id="faq-accordion-3">
        <button
          data-tw-merge
          data-tw-toggle="collapse"
          data-tw-target="#faq-accordion-3-collapse"
          type="button"
          aria-expanded="true"
          aria-controls="faq-accordion-3-collapse"
          class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
        >
          How To Troubleshoot Common HTTP Error Codes
        </button>
      </div>
      <div
        id="faq-accordion-3-collapse"
        aria-labelledby="faq-accordion-3"
        class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
      >
        <div
          data-tw-merge
          class="leading-relaxed accordion-body text-slate-600 dark:text-slate-500"
        >
          Lorem Ipsum is simply dummy text of the printing and
          typesetting industry. Lorem Ipsum has been the industry's
          standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a
          type specimen book. It has survived not only five
          centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged.
        </div>
      </div>
    </div>
    <div
      data-tw-merge
      class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
    >
      <div class="accordion-header" id="faq-accordion-4">
        <button
          data-tw-merge
          data-tw-toggle="collapse"
          data-tw-target="#faq-accordion-4-collapse"
          type="button"
          aria-expanded="true"
          aria-controls="faq-accordion-4-collapse"
          class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
        >
          An Introduction to Securing your Linux VPS
        </button>
      </div>
      <div
        id="faq-accordion-4-collapse"
        aria-labelledby="faq-accordion-4"
        class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
      >
        <div
          data-tw-merge
          class="leading-relaxed accordion-body text-slate-600 dark:text-slate-500"
        >
          Lorem Ipsum is simply dummy text of the printing and
          typesetting industry. Lorem Ipsum has been the industry's
          standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a
          type specimen book. It has survived not only five
          centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged.
        </div>
      </div>
    </div>
    </div>

You can configure the active accordion by adding a show class to the desired accordion.

# Alert

## Working with built-in alert components

These are very basic HTML structure of the alert components, you can open the demo to check more of the other implementations.

    <div class="flex flex-col gap-2">
    <div
      role="alert"
      class="relative px-5 py-4 text-white border rounded-md alert bg-primary border-primary dark:border-primary"
    >
      Awesome simple alert
    </div>
    <div
      role="alert"
      class="relative px-5 py-4 border rounded-md alert bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300"
    >
      Awesome simple alert
    </div>
    <div
      role="alert"
      class="relative px-5 py-4 border rounded-md alert bg-success border-success text-slate-900 dark:border-success"
    >
      Awesome simple alert
    </div>
    <div
      role="alert"
      class="relative px-5 py-4 border rounded-md alert bg-warning border-warning text-slate-900 dark:border-warning"
    >
      Awesome simple alert
    </div>
    <div
      role="alert"
      class="relative px-5 py-4 text-white border rounded-md alert bg-pending border-pending dark:border-pending"
    >
      Awesome simple alert
    </div>
    <div
      role="alert"
      class="relative px-5 py-4 text-white border rounded-md alert bg-danger border-danger dark:border-danger"
    >
      Awesome simple alert
    </div>
    <div
      role="alert"
      class="relative px-5 py-4 text-white border rounded-md alert bg-dark border-dark dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300"
    >
      Awesome simple alert
    </div>
    </div>

You can add a close button to the alert by using the btn-close class.

# Dropdown

## Working with built-in dropdown components

These are very basic HTML structure of the dropdown components, you can open the demo to check more of the other implementations.

      <div
      data-tw-merge
      data-tw-placement="bottom-end"
      class="relative dropdown"
    >
      <button
        data-tw-merge
        data-tw-toggle="dropdown"
        aria-expanded="false"
        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
      >
        Show Dropdown
      </button>
      <div
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
      >
        <div
          data-tw-merge
          class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        >
          <a
            class="flex items-center p-2 transition duration-300 ease-in-out rounded-md cursor-pointer hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
            >New Dropdown</a
          >
          <a
            class="flex items-center p-2 transition duration-300 ease-in-out rounded-md cursor-pointer hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
            >Delete Dropdown</a
          >
        </div>
      </div>
    </div>

You can use the available javascript API to show or hide the dropdown. Please check the following APIs for more datils.

    // Show dropdown
    const el = document.querySelector("#programmatically-dropdown");
    const dropdown = tailwind.Dropdown.getOrCreateInstance(el);
    dropdown.show();

    // Hide dropdown
    const el = document.querySelector("#programmatically-dropdown");
    const dropdown = tailwind.Dropdown.getOrCreateInstance(el);
    dropdown.hide();

    // Toggle dropdown
    const el = document.querySelector("#programmatically-dropdown");
    const dropdown = tailwind.Dropdown.getOrCreateInstance(el);
    dropdown.toggle();

# Modal & Slideover

## Working with built-in modal & slideover components

These are very basic HTML structure of the modal components, you can open the demo to check more of the other implementations.

    <!-- BEGIN: Modal Toggle -->
    <div class="text-center">
      <a
        data-tw-merge
        data-tw-toggle="modal"
        data-tw-target="#basic-modal-preview"
        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
        >Show Modal</a
      >
    </div>
    <!-- END: Modal Toggle -->
    <!-- BEGIN: Modal Content -->
    <div
      data-tw-backdrop=""
      aria-hidden="true"
      tabindex="-1"
      id="basic-modal-preview"
      class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
    >
      <div
        data-tw-merge
        class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px] p-10 text-center"
      >
        This is totally awesome blank modal!
      </div>
    </div>
    <!-- END: Modal Content -->

The slideover component inherits the functionality of the modal component, you can simply add the modal-slide-over modifier class to turn a modal component into a slideover.

    <!-- BEGIN: Slide Over Toggle -->
    <div class="text-center">
      <a
        data-tw-merge
        data-tw-toggle="modal"
        data-tw-target="#basic-slide-over-preview"
        href="#"
        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
        >Show Slide Over</a
      >
    </div>
    <!-- END: Slide Over Toggle -->
    <!-- BEGIN: Slide Over Content -->
    <div
      data-tw-backdrop=""
      aria-hidden="true"
      tabindex="-1"
      id="basic-slide-over-preview"
      class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
    >
      <div
        data-tw-merge
        class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
      >
        <div
          data-tw-merge
          class="flex items-center p-5 px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="mr-auto text-base font-medium">
            Blank Slide Over
          </h2>
        </div>
        <div data-tw-merge class="flex-1 p-5 overflow-y-auto">
          This is totally awesome blank slide over!
        </div>
      </div>
    </div>
    <!-- END: Slide Over Content -->

You can use the available javascript API to show or hide the modal & slideover. Please check the following APIs for more datils.

    // Show modal
    const el = document.querySelector("#basic-modal");
    const modal = tailwind.Modal.getOrCreateInstance(el);
    modal.show();

    // Hide modal
    const el = document.querySelector("#basic-modal");
    const modal = tailwind.Modal.getOrCreateInstance(el);
    modal.hide();

    // Toggle modal
    const el = document.querySelector("#basic-modal");
    const modal = tailwind.Modal.getOrCreateInstance(el);
    modal.toggle();

    // Show slideover
    const el = document.querySelector("#basic-slide-over");
    const slideOver = tailwind.Modal.getOrCreateInstance(el);
    slideOver.show();

    // Hide slideover
    const el = document.querySelector("#basic-slide-over");
    const slideOver = tailwind.Modal.getOrCreateInstance(el);
    slideOver.hide();

    // Toggle slideover
    const el = document.querySelector("#basic-slide-over");
    const slideOver = tailwind.Modal.getOrCreateInstance(el);
    slideOver.toggle();

# SVG Loading Icon

## Working with built-in SVG loading icon components

These are the built-in SVG loading icons available on Midone. The icon component has a data-loading-icon parameter to specify the icon, and every icon element will be replaced with an SVG icon at runtime. You can also use the data-color parameter to specify the color of the icon.

    <!-- Audio -->
    <i data-loading-icon="audio" class="w-8 h-8"></i>

    <!-- Ball Triangle -->
    <i data-loading-icon="ball-triangle" class="w-8 h-8"></i>

    <!-- Bars -->
    <i data-loading-icon="bars" class="w-8 h-8"></i>

    <!-- Circles -->
    <i data-loading-icon="circles" class="w-8 h-8"></i>

    <!-- Grid -->
    <i data-loading-icon="grid" class="w-8 h-8"></i>

    <!-- Hearts -->
    <i data-loading-icon="hearts" class="w-8 h-8"></i>

    <!-- Oval -->
    <i data-loading-icon="oval" class="w-8 h-8"></i>

    <!-- Puff -->
    <i data-loading-icon="puff" class="w-8 h-8"></i>

    <!-- Rings -->
    <i data-loading-icon="rings" class="w-8 h-8"></i>

    <!-- Spinning Circles -->
    <i data-loading-icon="spinning-circles" class="w-8 h-8"></i>

    <!-- Tail Spin -->
    <i data-loading-icon="tail-spin" class="w-8 h-8"></i>

    <!-- Three Dots -->
    <i data-loading-icon="three-dots" class="w-8 h-8"></i>

You can initialize icons at runtime with the javascript API, this will be useful when you make changes to the DOM element such as changing icons or using new icons.

    // Example re-init SVG loading icon
    tailwind.svgLoader();

# Tab

## Working with built-in tab components

These are very basic HTML structure of the tab components, you can open the demo to check more of the other implementations.

    <div>
    <ul
      data-tw-merge
      role="tablist"
      class="flex w-full border-b border-slate-200 dark:border-darkmode-400"
    >
      <li
        id="example-1-tab"
        data-tw-merge
        role="presentation"
        class="flex-1 -mb-px focus-visible:outline-none"
      >
        <button
          data-tw-merge
          data-tw-target="#example-1"
          role="tab"
          class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white block border-transparent rounded-t-md dark:border-transparent [&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400 [&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent active w-full py-2"
        >
          Example Tab 1
        </button>
      </li>
      <li
        id="example-2-tab"
        data-tw-merge
        role="presentation"
        class="flex-1 -mb-px focus-visible:outline-none"
      >
        <button
          data-tw-merge
          data-tw-target="#example-2"
          role="tab"
          class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white block border-transparent rounded-t-md dark:border-transparent [&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400 [&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent w-full py-2"
        >
          Example Tab 2
        </button>
      </li>
    </ul>
    <div class="border-b border-l border-r tab-content">
      <div
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-1"
        role="tabpanel"
        aria-labelledby="example-1-tab"
        class="p-5 leading-relaxed tab-pane active"
      >
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text
        ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into
        electronic typesetting, remaining essentially unchanged. It was
        popularised in the 1960s with the release of Letraset sheets
        containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of
        Lorem Ipsum.
      </div>
      <div
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-2"
        role="tabpanel"
        aria-labelledby="example-2-tab"
        class="p-5 leading-relaxed tab-pane"
      >
        It is a long established fact that a reader will be distracted by
        the readable content of a page when looking at its layout. The
        point of using Lorem Ipsum is that it has a more-or-less normal
        distribution of letters, as opposed to using 'Content here,
        content here', making it look like readable English. Many desktop
        publishing packages and web page editors now use Lorem Ipsum as
        their default model text, and a search for 'lorem ipsum' will
        uncover many web sites still in their infancy. Various versions
        have evolved over the years, sometimes by accident, sometimes on
        purpose (injected humour and the like).
      </div>
    </div>
    </div>

# Configure PurgeCSS

## Configuring PurgeCSS on TailwindCSS

Configuring PurgeCSS in TailwindCSS is very easy. We have provided an example in tailwind.config.js. You can reconfigure these settings if you have different project structures or add new file extensions.

    ...
    content: ["./**/*.{php,html,js,jsx,ts,tsx}"],
    ...

# Running Production Build

## Running production build to produce optimized JS/CSS assets

To produce an optimized JS/CSS assets, you can run yarn run build to compile assets for a production build. It will automatically purge unused CSS classes and minify the assets.

# Third-Party Libraries

## List of third-party libraries and official/documentation page

Library | Official/Documentation Page
--- | ---
CKEditor | https://ckeditor.com/
Chartjs | https://www.chartjs.org/
DayJs | https://github.com/iamkun/dayjs
DropzoneJs | https://www.dropzonejs.com/
Feather Icons | https://feathericons.com/
HighlightJs | https://highlightjs.org/
JS Beautify | https://github.com/beautify-web/js-beautify
Litepicker | https://wakirin.github.io/Litepicker/
PristineJs | http://pristine.js.org/
Tabulator | http://tabulator.info/
Tom Select | https://tom-select.js.org/
Tiny Slider | https://github.com/ganlanyuan/tiny-slider
TippyJs | https://atomiks.github.io/tippyjs/
ToastifyJs | https://github.com/apvarun/toastify-js
SheetJs | https://sheetjs.com/
Zoom Vanilla | https://github.com/spinningarrow/zoom-vanilla.js/
Axios | https://github.com/axios/axios
SVG Loaders | https://github.com/SamHerbert/SVG-Loaders
ESBuild | https://esbuild.github.io/
TailwindCSS | https://tailwindcss.com/

# Getting Support

## Support and assistance information

Don’t hesitate to contact us with any questions or concerns you may have at leftforcode@gmail.com. Please include your purchase code for verification process, you can check this link to find your purchase code.