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

# Introduction

## Introducing Midone TailwindCSS 3 & Laravel 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:

PHP (Laravel's minimum supported PHP version is now 8.0.2).

https://www.php.net/downloads

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

# Frontend Dependencies

## A few steps to install the frontend 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.

# Backend Dependencies

## A few steps to install the backend dependencies

Next, install the php dependencies with composer.

- Install composer : Please install latest version of composer from https://getcomposer.org/.
- Access console : Open composer console.
- In console, navigate to the location where main folder is extracted.
- Navigate to the the project's root directory.
- Run composer install to install dependencies.

# Customizing Colors

## Change the template's primary colors

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 /resources/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");
        }
    }

# JIT Mode

## Enable/Disable JIT mode compiler

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}",
            "./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
            "./node_modules/@left4code/tw-starter/**/*.js",
        ],

# Build Tools

## Learn how to configure Vite

Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. You can configure Vite on the vite.config.js file.

    ...
    laravel({
      input: [
          "resources/css/app.css",
          "resources/js/app.js",
          "resources/js/ckeditor-classic.js",
          "resources/js/ckeditor-inline.js",
          "resources/js/ckeditor-balloon.js",
          "resources/js/ckeditor-balloon-block.js",
          "resources/js/ckeditor-document.js",
      ],
      refresh: true,
    }),
    ...

You can see all available APIs in the Vite documentation.

# Javascript Structure

## Learn javascript code structure on Midone

By default, every javascript file is imported in this file /resources/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 vite.config.js. Please check the following example for more details.

    ...
    laravel({
      input: [
          "resources/js/create-product.js", // Include third-party libraries for create-product page
          "resources/js/update-product.js", // Include third-party libraries for update-product page
          "resources/js/landing-page.js", // Include third-party libraries for landing-page page
          "resources/js/app.js", // Include third-party libraries for all pages
          "resources/css/app.css",
      ],
      refresh: true,
    }),
    ...

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.

# Global Third-Party Libraries

## Learn how to use the library outside of the app.js configuration

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 /resources/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 Laravel 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.

# Configure Google Map API Key

## Working with google map

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 Laravel 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>

# CSS Structure

## Learn CSS code structure on Midone

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 /resources/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";

# Animations

## Animate elements with CSS animations

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.

Class | Description
--- | ---
intro-y | Sequentially move elements from bottom to top with fade-in animation.
-intro-y | Sequentially move elements from top to bottom with fade-in animation.
intro-x | Sequentially move elements from right to left with fade-in animation.
-intro-x | Sequentially move elements from left to right with fade-in animation.
zoom-in | Zoom element on hover.

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";

# Side Menu Layout

## Working with side menu layout

    <!DOCTYPE html>
    <html lang="en" class="light">
        <!-- BEGIN: Head -->
        <head>
            <title>Dashboard - Rubick - Tailwind Laravel 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>

# Simple Menu Layout

## Working with simple menu layout

    <!DOCTYPE html>
    <html lang="en" class="light">
        <!-- BEGIN: Head -->
        <head>
            <title>Dashboard - Rubick - Tailwind Laravel 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>

# Top Menu Layout

## Working with top menu layout

    <!DOCTYPE html>
    <html lang="en" class="light">
        <!-- BEGIN: Head -->
        <head>
            <title>Dashboard - Rubick - Tailwind Laravel 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="px-3 pt-3 mb-10 -mx-3 -mt-10 border-b border-theme-29 md:-mt-5 sm:-mx-8 sm:px-8 md:pt-0">
                ...
            </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

## Using dark mode on Midone

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 Laravel 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");
        }
    });

# View Composer

## Using different layouts & built-in view composer.

You may be familiar with Laravel's view composer feature. Midone includes several views composer that you can use to change the layout, showing menus, and dark mode features. You can easily show page with a specific layout via controller.

    <?php

    namespace App\Http\Controllers;

    use App\Http\Controllers\Controller;

    class PageController extends Controller
    {
        /**
          * Show specified view.
          *
          * @param  \Illuminate\Http\Request  $request
          * @return \Illuminate\Http\Response
          */
        public function dashboardOverview1()
        {
            return view('pages/dashboard-overview-1', [
                // Use the top-menu layout
                'layout' => 'top-menu'

                // Pass data to view
                'products' => Products::all()
            ]);
        }

        ...

You can check other included view composers at /App/Http/View/Composers.

# 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 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="leading-relaxed text-gray-700 accordion-body dark:text-gray-600">
                    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="leading-relaxed text-gray-700 accordion-body dark:text-gray-600">
                    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="leading-relaxed text-gray-700 accordion-body dark:text-gray-600">
                    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="leading-relaxed text-gray-700 accordion-body dark:text-gray-600">
                    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 items-center mb-2 alert alert-primary alert-dismissible show" 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.

# 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 id="basic-dropdown" class="dropdown">
        <button class="dropdown-toggle btn btn-primary" aria-expanded="false">Show Dropdown</button>
        <div class="w-40 dropdown-menu">
            <div class="p-2 dropdown-menu__content box dark:bg-dark-1">
                <a href="" class="block p-2 transition duration-300 ease-in-out bg-white rounded-md dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2">New Dropdown</a>
                <a href="" class="block p-2 transition duration-300 ease-in-out bg-white rounded-md dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2">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 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="p-10 text-center modal-body"> 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="p-5 modal-header">
                    <h2 class="mr-auto text-base font-medium">
                        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();

# 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 class="justify-center nav nav-tabs" role="tablist">
        <a id="tab-1-toggle" data-toggle="tab" data-target="#tab-1" href="javascript:;" class="flex-1 py-2 text-center rounded-md 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 text-center rounded-md" 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>

# 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.

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

# 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/
Tail Select | https://github.pytes.net/tail.select/
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
Vite | https://vitejs.dev/
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.