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

Browser Support

Extensive browser support

Chrome

Edge

Mozilla

Opera

Safari

Please install the following requirements:

Nodejs (TailwindCSS requires nodejs version 12.13.0 or higher).

Yarn (Package manager)

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

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.

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"]),
    },
},                           
                            
                        

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.

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.

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.

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.

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.

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();
                            
                        

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();
                            
                        

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();
                            
                        

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>
                            
                        

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}"],
...
                            
                        

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.

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.