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

After downloading the file, you will find two versions in the package, Source and Compiled versions. We strongly recommend using the Source version especially for new projects for easy configuration and using new 3rd party libraries.

If you are working on an existing project, follow the steps below to integrate the template to your project.

• Copy the following files to your project directory:
  • /dist
  • /src
  • package.json
  • postcss.config.js
  • tailwind.config.js
  • webpack.mix.js
• Next, follow the steps on the installation page to install the project dependencies.

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 watch 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 main color configuration relies on CSS variables, the configuration can also be used in JS libraries like chart or icons. To change the color, simply change the color channels inside /src/assets/css/_colors.css, without including the actual color function.

If you want to use the default color of Tailwind you can directly use the directive theme() function from Tailwind. Please check this link for more detailed options and features.

                            
/* Default colors */
:root {
    --color-primary: theme("colors.rgb.blue.800");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.lime.500");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.yellow.400");
    --color-pending: theme("colors.rgb.orange.500");
    --color-danger: theme("colors.rgb.red.600");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    --color-slate-50: theme("colors.rgb.slate.50");
    --color-slate-100: theme("colors.rgb.slate.100");
    --color-slate-200: theme("colors.rgb.slate.200");
    --color-slate-300: theme("colors.rgb.slate.300");
    --color-slate-400: theme("colors.rgb.slate.400");
    --color-slate-500: theme("colors.rgb.slate.500");
    --color-slate-600: theme("colors.rgb.slate.600");
    --color-slate-700: theme("colors.rgb.slate.700");
    --color-slate-800: theme("colors.rgb.slate.800");
    --color-slate-900: theme("colors.rgb.slate.900");
}

/* Default dark-mode colors */
.dark {
    --color-primary: theme("colors.rgb.blue.700");
    --color-slate-500: theme("colors.rgb.slate.400");
    --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-primary: theme("colors.rgb.emerald.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.emerald.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.yellow.400");
    --color-pending: theme("colors.rgb.amber.500");
    --color-danger: theme("colors.rgb.rose.600");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.emerald.800");
    }
}

/* Theme 2 colors */
.theme-2 {
    --color-primary: theme("colors.rgb.blue.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.teal.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.amber.500");
    --color-pending: theme("colors.rgb.orange.500");
    --color-danger: theme("colors.rgb.red.700");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.blue.800");
    }
}

/* Theme 3 colors */
.theme-3 {
    --color-primary: theme("colors.rgb.cyan.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.teal.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.amber.500");
    --color-pending: theme("colors.rgb.amber.600");
    --color-danger: theme("colors.rgb.red.700");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.cyan.800");
    }
}

/* Theme 4 colors */
.theme-4 {
    --color-primary: theme("colors.rgb.indigo.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.emerald.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.yellow.500");
    --color-pending: theme("colors.rgb.orange.600");
    --color-danger: theme("colors.rgb.red.700");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.indigo.700");
    }
}                              
                            
                        

Since version 2.1+ TailwindCSS has a new compiler called JIT (Just In Time), which has many advantages over the previous compiler, such as speeding up the compilation process and rendering in the browser. To enable/disable this mode, you can open the tailwind.config.js file, comment/uncomment this line mode: jit or add it if it is not already there, don't forget to rerun the compiler to reload the configuration.

                            
const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

module.exports = {
    mode: "jit",
    content: [
        "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./node_modules/@left4code/tw-starter/**/*.js",
    ],
                            
                        

Laravel Mix is ​​a wrapper for webpack. With Laravel Mix, we can shorten our build tools configuration and focus on the code we want to develop. You can configure Laravel Mix on the webpack.mix.js file.

                            
...
mix.js("src/js/app.js", "dist/js")
    .css("dist/css/_app.css", "dist/css/app.css")
...
                            
                        

You can see all available APIs in the Laravel Mix documentation.

By default, every javascript file is imported in this file /src/js/app.js. You can add or remove new third-party libraries from there.

                            
/*
|--------------------------------------------------------------------------
| Midone Built-in Components
|--------------------------------------------------------------------------
|
| Import Midone built-in components.
|
*/
import "./bootstrap";
import "@left4code/tw-starter/dist/js/svg-loader";
import "@left4code/tw-starter/dist/js/accordion";
import "@left4code/tw-starter/dist/js/alert";
import "@left4code/tw-starter/dist/js/dropdown";
import "@left4code/tw-starter/dist/js/modal";
import "@left4code/tw-starter/dist/js/tab";

/*
|--------------------------------------------------------------------------
| 3rd Party Libraries
|--------------------------------------------------------------------------
|
| Import 3rd party library JS files.
|
*/
import "./chart";
import "./highlight";
import "./feather";
import "./tiny-slider";
import "./tippy";
import "./datepicker";
import "./tom-select";
import "./dropzone";
import "./validation";
import "./zoom";
import "./notification";
import "./tabulator";
import "./calendar";

/*
|--------------------------------------------------------------------------
| Custom Components
|--------------------------------------------------------------------------
|
| Import JS custom components.
|
*/
import "./maps";
import "./chat";
import "./show-modal";
import "./show-slide-over";
import "./show-dropdown";
import "./search";
import "./copy-code";
import "./show-code";
import "./side-menu";
import "./mobile-menu";
import "./side-menu-tooltip";
import "./dark-mode-switcher";                             
                            
                        

You can also create new endpoint assets if needed by modifying webpack.mix.js. Please check the following example for more details.

                            
...
mix.js("src/js/create-product.js", "public/dist/js") // Include third-party libraries for create-product page
    .js("src/js/update-product.js", "public/dist/js") // Include third-party libraries for update-product page
    .js("src/js/landing-page.js", "public/dist/js") // Include third-party libraries for landing-page page
    .js("src/js/app.js", "public/dist/js") // Include third-party libraries for all pages
    .css("src/css/app.css", "public/dist/css")
...
                            
                        

This way, you can split assets as much as needed into smaller ones so that each user only downloads the required files when accessing the page.

In some cases, we need a way to access the plugin outside the app.js configuration. You can do this by attaching the required plugin to the window object. For a more detailed example, please open this file /src/js/bootstrap.js and check the following code.

                            
// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";
import dom from "@left4code/tw-starter/dist/js/dom";

// Example with Toastify plugin
import Toastify from "toastify-js";

// Set plugins globally
window.helper = helper;
window.Popper = Popper;
window.$ = dom;

// Attach to the window object
window.Toastify = Toastify;
                            
                        

Then you can access the plugin instance outside of app.js.

                            
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Midone - Tailwind HTML Admin Template</title>
</head>
    ...
    <body>
        <!-- BEGIN: JS Assets-->
        <script src="/dist/js/app.js"></script>
        <!-- END: JS Assets-->
        <script>
            // Write your code here
            Toastify({
                node: cash("#basic-non-sticky-notification-content")
                    .clone()
                    .removeClass("hidden")[0],
                duration: 3000,
                newWindow: true,
                close: true,
                gravity: "top",
                position: "right",
                stopOnFocus: true,
            }).showToast();
        </script>
    </body>
</html>
                            
                        

Please note to put your javascript code after app.js script tag.

You can see the API Key configuration at the end of the file, please replace the placeholder string ["your-google-map-api"] with the API key you have.

                            
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Midone - Tailwind HTML Admin Template</title>
</head>
    ...
    <body>
        <!-- BEGIN: JS Assets-->
        <script src="https://maps.googleapis.com/maps/api/js?key=["your-google-map-api"]&libraries=places"></script>
        <!-- END: JS Assets-->
    </body>
</html>
                            
                        

Midone uses some PostCSS plugin like postcss-import, tailwindcss/nesting, and postcss-advanced-variables to use variables, nested CSS code, and modular CSS code. This plugin offers similar features to SASS but with only PostCSS plugins. If you want to know more about using Tailwind with PostCSS as a default preprocessor please check this link.

You can open /src/css/app.css to add new 3rd party library or add new component.

                            
/*
|--------------------------------------------------------------------------
| 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
|
*/
@import "./_tailwind.css";

/*
|--------------------------------------------------------------------------
| Colors
|--------------------------------------------------------------------------
|
| 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 "./_colors.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/_roboto.css";

/*
|--------------------------------------------------------------------------
| Mixins
|--------------------------------------------------------------------------
|
| Import helper mixins.
|
*/
@import "@left4code/tw-starter/dist/css/mixins/_media.css";

/*
|--------------------------------------------------------------------------
| 3rd Party Libraries
|--------------------------------------------------------------------------
|
| Import 3rd party library CSS files.
|
*/
@import "@left4code/tw-starter/dist/css/_breadcrumb.css";
@import "@left4code/tw-starter/dist/css/_accordion.css";
@import "@left4code/tw-starter/dist/css/_alert.css";
@import "@left4code/tw-starter/dist/css/_btn.css";
@import "@left4code/tw-starter/dist/css/_dropdown.css";
@import "@left4code/tw-starter/dist/css/_file.css";
@import "@left4code/tw-starter/dist/css/_form-reset.css";
@import "@left4code/tw-starter/dist/css/_form-check.css";
@import "@left4code/tw-starter/dist/css/_form-control.css";
@import "@left4code/tw-starter/dist/css/_form-help.css";
@import "@left4code/tw-starter/dist/css/_form-inline.css";
@import "@left4code/tw-starter/dist/css/_form-label.css";
@import "@left4code/tw-starter/dist/css/_form-select.css";
@import "@left4code/tw-starter/dist/css/_image-fit.css";
@import "@left4code/tw-starter/dist/css/_input-group.css";
@import "@left4code/tw-starter/dist/css/_intro.css";
@import "@left4code/tw-starter/dist/css/_modal.css";
@import "@left4code/tw-starter/dist/css/_pagination.css";
@import "@left4code/tw-starter/dist/css/_progress.css";
@import "@left4code/tw-starter/dist/css/_scrollbar.css";
@import "@left4code/tw-starter/dist/css/_tab.css";
@import "@left4code/tw-starter/dist/css/_table.css";
@import "@left4code/tw-starter/dist/css/_typing-dots.css";
@import "@left4code/tw-starter/dist/css/_zoom-in.css";
@import "@left4code/tw-starter/dist/css/_box.css";
@import "highlight.js/styles/github.css";
@import "tippy.js/dist/tippy.css";
@import "tippy.js/themes/light.css";
@import "tippy.js/dist/svg-arrow.css";
@import "tippy.js/animations/shift-away.css";
@import "toastify-js/src/toastify.css";
@import "dropzone/dist/dropzone.css";
@import "zoom-vanilla.js/dist/zoom.css";
@import "tabulator-tables/dist/css/tabulator.css";
@import "tom-select/dist/css/tom-select.css";
@import "tiny-slider/dist/tiny-slider.css";

/*
|--------------------------------------------------------------------------
| Components
|--------------------------------------------------------------------------
|
| Import CSS components.
|
*/
@import "./components/_global.css";
@import "./components/_top-bar.css";
@import "./components/_login.css";
@import "./components/_table-report.css";
@import "./components/_report-chart.css";
@import "./components/_search.css";
@import "./components/_notification.css";
@import "./components/_report-box.css";
@import "./components/_report-box-2.css";
@import "./components/_report-box-3.css";
@import "./components/_report-box-4.css";
@import "./components/_content.css";
@import "./components/_top-nav.css";
@import "./components/_side-nav.css";
@import "./components/_breadcrumb.css";
@import "./components/_toastify.css";
@import "./components/_toastify-content.css";
@import "./components/_feather-icon.css";
@import "./components/_top-bar-boxed.css";
@import "./components/_mobile-menu.css";
@import "./components/_inbox-filter.css";
@import "./components/_inbox.css";
@import "./components/_chat.css";
@import "./components/_chat-dropdown.css";
@import "./components/_news.css";
@import "./components/_pricing-tabs.css";
@import "./components/_error-page.css";
@import "./components/_search-result.css";
@import "./components/_notification-content.css";
@import "./components/_report-maps.css";
@import "./components/_pos-dropdown.css";
@import "./components/_post.css";
@import "./components/_litepicker.css";
@import "./components/_tiny-slider.css";
@import "./components/_tippy.css";
@import "./components/_tabulator.css";
@import "./components/_tom-select.css";
@import "./components/_dropzone.css";
@import "./components/_ckeditor.css";
@import "./components/_zoom-vanilla.css";
@import "./components/_dark-mode-switcher.css";
@import "./components/_hljs.css";
@import "./components/_source-preview.css";
@import "./components/_full-calendar.css";
@import "./components/_pristine.css";                             
                            
                        

TailwindCSS has built-in animation utilities that you can use to make your application more interactive. There are also some custom animations we have added for some components. You can check the table below for more details.

However, you can also disable the custom animation if you feel it's not necessary. You can open this file /src/css/app.css and remove the line below.

                            
/*
|--------------------------------------------------------------------------
| 3rd Party Libraries
|--------------------------------------------------------------------------
|
| Import 3rd party library CSS files.
|
*/
...
@import "~@left4code/tw-starter/dist/css/intro.css";
...
@import "~@left4code/tw-starter/dist/css/zoom-in.css";
                            
                        

                            
<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <head>
        <title>Dashboard - Rubick - Tailwind HTML Admin Template</title>
    </head>
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        <div class="mobile-menu md:hidden">
            ...
        </div>
        <!-- END: Mobile Menu -->
        <div class="flex">
            <!-- BEGIN: Side Menu -->
            <nav class="side-nav">
                ...
            </nav>
            <!-- END: Side Menu -->
            <!-- BEGIN: Content -->
            <div class="content">
                ...
            </div>
            <!-- END: Content -->
        </div>
    </body>
</html>
                            
                        

                            
<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <head>
        <title>Dashboard - Rubick - Tailwind HTML Admin Template</title>
    </head>
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        <div class="mobile-menu md:hidden">
            ...
        </div>
        <!-- END: Mobile Menu -->
        <div class="flex">
            <!-- BEGIN: Simple Menu -->
            <nav class="side-nav side-nav--simple">
                ...
            </nav>
            <!-- END: Simple Menu -->
            <!-- BEGIN: Content -->
            <div class="content">
                ...
            </div>
            <!-- END: Content -->
        </div>
    </body>
</html>
                            
                        

                            
<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <head>
        <title>Dashboard - Rubick - Tailwind HTML Admin Template</title>
    </head>
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        <div class="mobile-menu md:hidden">
            ...
        </div>
        <!-- END: Mobile Menu -->
        <!-- BEGIN: Top Bar -->
        <div class="border-b border-theme-29 -mt-10 md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 pt-3 md:pt-0 mb-10">
            ...
        </div>
        <!-- END: Top Bar -->
        <!-- BEGIN: Top Menu -->
        <nav class="top-nav">
            ...
        </nav>
        <!-- END: Top Menu -->
        <!-- BEGIN: Content -->
        <div class="content">
            ...
        </div>
        <!-- END: Content -->
    </body>
</html>
                            
                        

Dark mode themes can be activated by adding a dark class to the root of the HTML element. Please check the following code for more details.

                            
<!DOCTYPE html>
<html lang="en" class="dark">
<!-- BEGIN: Head -->
<head>
    <title>Dashboard - Rubick - Tailwind HTML Admin Template</title>
</head>
...
                            
                        

To create a toggle function you can use a simple javascript code like below.

                            
$(".dark-mode-switcher").on("click", function () {
    if ($("html").hasClass("dark")) {
        $("html").removeClass("dark").addClass("light");
    } else {
        $("html").removeClass("light").addClass("dark");
    }
});
                            
                        

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

                            
<div id="faq-accordion-1" class="accordion">
    <div class="accordion-item">
        <div id="faq-accordion-content-1" class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-1" aria-expanded="true" aria-controls="faq-accordion-collapse-1">
                OpenSSL Essentials: Working with SSL Certificates, Private Keys
            </button>
        </div>
        <div id="faq-accordion-collapse-1" class="accordion-collapse collapse show" aria-labelledby="faq-accordion-content-1" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                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 class="accordion-item">
        <div id="faq-accordion-content-2" class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-2" aria-expanded="false" aria-controls="faq-accordion-collapse-2">
                Understanding IP Addresses, Subnets, and CIDR Notation
            </button>
        </div>
        <div id="faq-accordion-collapse-2" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-2" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                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 class="accordion-item">
        <div id="faq-accordion-content-3" class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-3" aria-expanded="false" aria-controls="faq-accordion-collapse-3">
                How To Troubleshoot Common HTTP Error Codes
            </button>
        </div>
        <div id="faq-accordion-collapse-3" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-3" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                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 class="accordion-item">
        <div id="faq-accordion-content-4" class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-4" aria-expanded="false" aria-controls="faq-accordion-collapse-4">
                An Introduction to Securing your Linux VPS
            </button>
        </div>
        <div id="faq-accordion-collapse-4" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-4" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                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="alert alert-primary alert-dismissible show flex items-center mb-2" role="alert">
    <i data-feather="alert-circle" class="w-6 h-6 mr-2"></i> Awesome alert with icon
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        <i data-feather="x" class="w-4 h-4"></i>
    </button>
</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 id="basic-dropdown" class="dropdown">
    <button class="dropdown-toggle btn btn-primary" aria-expanded="false">Show Dropdown</button>
    <div class="dropdown-menu w-40">
        <div class="dropdown-menu__content box dark:bg-dark-1 p-2">
            <a href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md">New Dropdown</a>
            <a href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md">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 href="javascript:;" data-toggle="modal" data-target="#basic-modal" class="btn btn-primary">Show Modal</a>
</div>
<!-- END: Modal Toggle -->
<!-- BEGIN: Modal Content -->
<div id="basic-modal" class="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body p-10 text-center"> This is totally awesome blank modal! </div>
        </div>
    </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 href="javascript:;" data-toggle="modal" data-target="#basic-slideover" class="btn btn-primary">Show Slide Over</a>
</div>
<!-- END: Slide Over Toggle -->
<!-- BEGIN: Slide Over Content -->
<div id="basic-slideover" class="modal modal-slide-over" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header p-5">
                <h2 class="font-medium text-base mr-auto">
                    Blank Slide Over
                </h2>
            </div>
            <div class="modal-body"> This is totally awesome blank slide over! </div>
        </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 class="nav nav-tabs justify-center" role="tablist">
    <a id="tab-1-toggle" data-toggle="tab" data-target="#tab-1" href="javascript:;" class="flex-1 py-2 rounded-md text-center active" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a>
    <a id="tab-2-toggle" data-toggle="tab" data-target="#tab-2" href="javascript:;" class="flex-1 py-2 rounded-md text-center" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</a>
</div>
<div class="tab-content">
    <div id="tab-1" class="tab-pane active" role="tabpanel" aria-labelledby="tab-1">
        ...
    </div>
    <div id="tab-2" class="tab-pane" role="tabpanel" aria-labelledby="tab-2">
        ...
    </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.

                            
const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

module.exports = {
    mode: "jit",
    content: [
        "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./node_modules/@left4code/tw-starter/**/*.js",
        ".//*.html",
    ],
    ...
                            
                        

To produce an optimized JS/CSS assets, you can run yarn run prod 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.