Mamix - Tailwind CSS Admin Dashboard Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Tailwind CSS framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Mamix is a Tailwind CSS Admin Dashboard Template using modern and minimal design. It is fully flexible user-friendly and responsive. Mamix Modern template is powered with HTML 5, SASS, & Tailwind which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 240+ HTML Pages . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. This template is build using Tailwind CSS framework. After Purchased this template you will get All HTML files,CSS, Scss and JS Files.

It has super clean flat user interface admin design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design template.

It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Mamix Tailwind CSS Admin Dashboard Template, you will be able to get free download of all future updates.

• Tailwind CSS v3.4.7
• Preline v2.4.1
• Sass
• Gulp v5.0.0

• Firefox
• Safari
• Opera
• Chrome
• Edge

src/
├── assets/
├── |-- audio/
├── |-- icon-fonts/
|   |-- |-- bootstrap-icons/
|   |-- |-- boxicons/
|   |-- |-- feather/
|   |-- |-- line-awesome/
|   |-- |-- Remixicon/
|   |-- |-- tabler-icons/
├── |-- images/
├── |-- js/
├── |-- scss/
|   |-- |-- custom/
|   |-- |-- pages/
|   |-- |-- plugins/
|   |-- |-- switcher/
|   |-- |-- tailwind/
|   |-- |-- _icons.scss
|   |-- |-- _variables.scss
|   |-- |-- styles.scss
├── |-- video/
├── html/
|   |-- partials/
|   |-- |-- auth-js.html
|   |-- |-- commonjs.html
|   |-- |-- custom_switcherjs.html
|   |-- |-- footer.html
|   |-- |-- header.html
|   |-- |-- headersearch-modal.html
|   |-- |-- loader.html
|   |-- |-- mainhead.html
|   |-- |-- mainhead2.html
|   |-- |-- menu.html
|   |-- |-- switcher.html
gulpfile.mjs
package-lock.json
package.js
postcss.config
tailwind.config

• Mamix – Tailwind CSS Admin Dashboard Template / : Root template folder contain all html, js, css, scss, images and other files.
• • assets/ : Folder contain all the Mamix Template assets which has css, js, scss, and images.
  • • icon-fonts/: Folder contain all types of icons which is used in this template.
    • images/ : Template images.
    • js/ : Folder contain all the template pages js files.
    • scss/ : Folder contain all pages scss files and all plugins scss files also included.
    • Video/ : Folder contains video used in this template.
  • • html : All HTML Pages.
    • • Partials/:

        1. This folder have all common html files which we commonly used in all html pages. If you want to add content which you need in all html pages you just create new file and add content to that. No need to add that whole content to every page, you just add that link into all html pages.

        2. Import that created file link into all html pages with @SPK@include("partials/sample.html")

• gulpfile.mjs : Gulp tasks mjs file.
• package.json : package json file.

Note: If you want to use only CSS format then you should follow below process.

Step-1: Remove complete scss folder. Root path: (../assets/scss)

Step-2: Change styles.min.css link to styles.css in mainhead.html Root path: (html/partials/mainhead.html)

Step-3: Remove .scss and .css.map extension related files in css folder. Root path: (../assets/css/*.scss) and (../assets/css/*.css.map)

Step-4: Remove "gulpfile.mjs", "package.json", "package-lock.json" files.

General HTML file structure of the Mamix template src Folder.

Root:html/empty.html

    @SPK@include("partials/mainhead.html")

</head>

<body>

    @SPK@include("partials/switcher.html")
    @SPK@include("partials/loader.html")

    <div class="page">
        @SPK@include("partials/header.html")
        @SPK@include("partials/menu.html")

      <!-- Start::content  -->
      <div class="content">
        <!-- Start::main-content -->
        <div class="main-content">
            <!-- Page Header -->
            <div class="my-4 page-header-breadcrumb flex items-center justify-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title font-medium text-[1.125rem] mb-2">  Empty</h1>
                    <ol class="breadcrumb mb-0 flex flex-wrap">
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0);">
                                Pages
                            </a>
                        </li>
                        <li class="breadcrumb-item !font-medium active" aria-current="page">  Empty</li>
                    </ol>
                </div>
                <div class="flex items-center">
                    <button class="ti-btn ti-btn-soft-primary btn-wave me-2">
                        <i class="bx bx-crown align-middle">  </i>     Plan Upgrade
                    </button>
                    <button class="ti-btn ti-btn-soft-secondary btn-wave me-0">
                        <i class="ri-upload-cloud-line align-middle"> </i>    Export Report
                    </button>
                </div>
            </div>
            <!-- Page Header Close -->

             <!-- Start::row-1 -->
             <div class="grid grid-cols-12 gap-x-6">
                <div class="xl:col-span-12 col-span-12">
                    <div class="box">
                        <div class="box-body">
                            <h6 class="mb-0 font-medium"> EMPTY CARD</h6>
                        </div>
                    </div>
                </div>
            </div>
            <!--End::row-1 -->

        </div>
    </div>
    


    @SPK@include("partials/headersearch_modal.html")
    @SPK@include("partials/footer.html")

    </div>

    @SPK@include("partials/commonjs.html")

    @SPK@include("partials/custom-switcherjs.html")

</body>

</html>

<html lang="en" dir="ltr" data-nav-layout="vertical" class="light" data-header-styles="light" data-menu-styles="dark"> 

<html lang="en" dir="ltr" data-nav-layout="vertical" class="light" data-header-styles="light" data-menu-styles="dark">

Refer following links for usage:

Refer following links for usage:

Refer following links for usage:

Refer following links for usage:

All plugins runs through npm.

If you want new plugins : Install new plugin from npm then run npm run dev command.

1. You need to add these files to make it work.

• HTML
• CSS
• JS

<!-- Choices JS -->
<script src="../assets/libs/choices.js/public/assets/scripts/choices.min.js"></script>

1. You need to add these files to make basic swiper work.

• HTML
• CSS
• JS

<!-- Swiper JS -->
<script src="../assets/libs/swiper/swiper-bundle.min.js"></script>

// deault swiper
var swiper = new Swiper(".swiper-basic", {
    loop: true,
    autoplay: {
        delay: 1500,
        disableOnInteraction: false,
    }
});

1. You need to add these files to make basic alert work.

• HTML
• CSS
• JS

<!-- Sweetalerts JS -->
<script src="../assets/libs/sweetalert2/sweetalert2.min.js"></script>

/* for basic sweet alert */
document.getElementById('basic-alert').onclick = function () {
    Swal.fire('Hello this is Basic alert message')
};

1. You need to add these files to make basic range slider work.

• HTML
• CSS
• JS

 <!-- noUiSlider JS -->
<script src="../assets/libs/nouislider/nouislider.min.js"></script>
<script src="../assets/libs/wnumb/wNumb.min.js"></script>

/* default slider */
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
    start: [30, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

1. You need to add these files to make basic Flatpickr work.

• HTML
• CSS
• JS

<!-- Date &  Time Picker JS -->
<script src="../assets/libs/flatpickr/flatpickr.min.js"></script>

/* To choose date */
flatpickr("#date", {});

1. You need to add below files to make classic color picker work.

• HTML
• CSS
• JS

<!-- Color Picker JS -->
<script src="../assets/libs/@simonwep/pickr/pickr.es5.min.js"></script>

const pickrContainer = document.querySelector('.pickr-container');
const themeContainer = document.querySelector('.theme-container');

/* classic */
const themes = [
    [
        'classic',
        {
            swatches: [
                'rgba(244, 67, 54, 1)',
                'rgba(233, 30, 99, 0.95)',
                'rgba(156, 39, 176, 0.9)',
                'rgba(103, 58, 183, 0.85)',
                'rgba(63, 81, 181, 0.8)',
                'rgba(33, 150, 243, 0.75)',
                'rgba(3, 169, 244, 0.7)',
                'rgba(0, 188, 212, 0.7)',
                'rgba(0, 150, 136, 0.75)',
                'rgba(76, 175, 80, 0.8)',
                'rgba(139, 195, 74, 0.85)',
                'rgba(205, 220, 57, 0.9)',
                'rgba(255, 235, 59, 0.95)',
                'rgba(255, 193, 7, 1)'
            ],

            components: {
                preview: true,
                opacity: true,
                hue: true,

                interaction: {
                    hex: true,
                    rgba: true,
                    hsva: true,
                    input: true,
                    clear: true,
                    save: true
                }
            }
        }
    ],
];

const buttons = [];
let pickr = null;

for (const [theme, config] of themes) {
    const button = document.createElement('button');
    button.innerHTML = theme;
    buttons.push(button);

    button.addEventListener('click', () => {
        const el = document.createElement('p');
        pickrContainer.appendChild(el);

        // Delete previous instance
        if (pickr) {
            pickr.destroyAndRemove();
        }

        // Apply active class
        for (const btn of buttons) {
            btn.classList[btn === button ? 'add' : 'remove']('active');
        }

        // Create fresh instance
        pickr = new Pickr(Object.assign({
            el,
            theme,
            default: '#6c5ffc'
        }, config));

        // Set events
        pickr.on('init', instance => {
            // console.log('Event: "init"', instance);
        }).on('hide', instance => {
            // console.log('Event: "hide"', instance);
        }).on('show', (color, instance) => {
            // console.log('Event: "show"', color, instance);
        }).on('save', (color, instance) => {
            // console.log('Event: "save"', color, instance);
        }).on('clear', instance => {
            // console.log('Event: "clear"', instance);
        }).on('change', (color, source, instance) => {
            // console.log('Event: "change"', color, source, instance);
        }).on('changestop', (source, instance) => {
            // console.log('Event: "changestop"', source, instance);
        }).on('cancel', instance => {
            // console.log('cancel', pickr.getColor().toRGBA().toString(0));
        }).on('swatchselect', (color, instance) => {
            // console.log('Event: "swatchselect"', color, instance);
        });
    });

    themeContainer.appendChild(button);
}

buttons[0].click();

1. You need to add these files to make gallery work.

• HTML
• CSS
• JS

<!-- Gallery JS -->
<script src="../assets/libs/glightbox/js/glightbox.min.js"></script>

var lightboxVideo = GLightbox({
    selector: '.glightbox'
});
lightboxVideo.on('slide_changed', ({ prev, current }) => {
    console.log('Prev slide', prev);
    console.log('Current slide', current);

    const { slideIndex, slideNode, slideConfig, player } = current;
});

1. You need to add these files to make full calendar work.

• HTML
• CSS
• JS

<!-- Moment JS -->
<script src="../assets/libs/moment/moment.js"></script>

<!-- Fullcalendar JS -->
<script src="../assets/libs/fullcalendar/main.min.js"></script>
<script src="../assets/js/fullcalendar.js"></script>

1. You need to add these files to make leaflet maps work.

• HTML
• CSS
• JS

<!-- Leaflet Maps JS -->
<script src="../assets/libs/leaflet/leaflet.js"></script>

/* default map */
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '© OpenStreetMap'
}).addTo(map);

1. You need to add these files to make Jsvector maps work.

• HTML
• CSS
• JS

    <!-- JSVector Maps JS -->
    <script src="../assets/libs/jsvectormap/js/jsvectormap.min.js"></script>

    <!-- JSVector Maps MapsJS -->
    <script src="../assets/libs/jsvectormap/maps/world-merc.js"></script>

    /* basic vector map */
    var map = new jsVectorMap({
    selector: "#vector-map",
    map: "world_merc",
    });
    
    

1. You need to add these files to make gmaps work.

• HTML
• JS

<!-- Google Maps API -->
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCW16SmpzDNLsrP-npQii6_8vBu_EJvEjA"></script>

<!-- Google Maps JS -->
<script src="../assets/libs/gmaps/gmaps.min.js"></script>

    /* basic map */
    var map = new GMaps({
        el: '#google-map',
        lat: -12.043333,
        lng: -77.028333
    });

1. You need to add these files to make simplebar work.

• HTML
• CSS
• JS

1. You need to add these files to make quill editor work.

• HTML
• CSS
• JS

<!-- Quill Editor JS -->
<script src="../assets/libs/quill/quill.min.js"></script>

/* quill snow editor */
var toolbarOptions = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'font': [] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'align': [] }],

    ['image', 'video'],
    ['clean']                                         // remove formatting button
];
var quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});

1. You need to add these files to make file pond work.

• HTML
• CSS
• JS

<!-- Filepond JS -->
<script src="../assets/libs/filepond/filepond.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-transform/filepond-plugin-image-transform.min.js"></script>

/* filepond */
FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize,
    FilePondPluginFileEncode,
    FilePondPluginImageEdit,
    FilePondPluginFileValidateType,
    FilePondPluginImageCrop,
    FilePondPluginImageResize,
    FilePondPluginImageTransform
);

/* multiple upload */
const MultipleElement = document.querySelector('.multiple-filepond');
FilePond.create(MultipleElement,);

1. You need to add these files to make drop zone work.

• HTML
• CSS
• JS

<!-- Dropzone JS -->
<script src="../assets/libs/dropzone/dropzone-min.js"></script>

/* dropzone */
let myDropzone = new Dropzone(".dropzone");
    myDropzone.on("addedfile", file => {
});

1. You need to add these files to make grid.js work.

• HTML
• CSS
• JS

<!-- Grid JS -->
<script src="../assets/libs/gridjs/gridjs.umd.js"></script>

// basic example
new gridjs.Grid({
    resizable: true,
    columns: [{
        name: "Date",
        width: "150px",
    }, {
        name: "Name",
        width: "150px",
    }, {
        name: "Email",
        width: "200px",
    }, {
        name: "ID",
        width: "150px",
    }, {
        name: "Price",
        width: "100px",
    }, {
        name: "Quantity",
        width: "100px",
    }, {
        name: "Total",
        width: "100px",
    }],
    data: [
        ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
        ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
        ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
        ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
        ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
    ],
}).render(document.getElementById("grid-example1"));
// basic example

1. You need to add these files to make Rater Js work.

• HTML
• JS

<!-- Rater JS -->
<script src="../assets/libs/rater-js/index.js"></script>

/* Basic Rater */
var starRating1 = raterJs({
    starSize: 24,
    element: document.querySelector("#rater-basic"),
    rateCallback: function rateCallback(rating, done) {
        this.setRating(rating);
        done();
    }
});
/* Basic Rater */

1. You need to add these files to make tarekraafat/autocomplete Js work.

• HTML
• CSS
• JS

<!-- Auto Complete JS -->
<script src="../assets/libs/@tarekraafat/autocomplete.js/autoComplete.min.js"></script>

    /* Auto Complete Basic */
    const autoCompleteJS = new autoComplete({
        selector: "#autoComplete",
        placeHolder: "Search for Food &  Drinks Combo",
        data: {
            src: ['Pizza, Soda',
                'Burger, Milkshake',
                'Tacos, Margarita',
                'Pasta, Red Wine',
                'Sushi, Green Tea',
                'Steak, Whiskey',
                'Salad, Sparkling Water',
                'Chicken Wings, Beer',
                'Fish and Chips, Lemonade',
                'Burrito, Iced Tea'],
            cache: true,
        },
        resultItem: {
            highlight: true
        },
        events: {
            input: {
                selection: (event) =>{
                    const selection = event.detail.selection.value;
                    autoCompleteJS.input.value = selection;
                }
            }
        }
        });
            /* Auto Complete Basic */

1. You need to add these files to make yaireo/dragsort work.

• HTML
• CSS
• JS

<!-- Dragsort JS -->
<script src="../assets/libs/@yaireo/dragsort/dragsort.js"></script>

1. You need to add these files to make yaireo/tagify work.

• HTML
• CSS
• JS

<!-- Tagify JS -->
<script src="../assets/libs/@yaireo/tagify/tagify.min.js"></script>

/* Basic Tagify */
// The DOM element you wish to replace with Tagify
var inputtagify = document.querySelector('input[name=basic]');

1. You need to add these files to make dual-listbox work.

• HTML
• CSS
• JS

<!-- Dual ListBox JS -->
<script src="../assets/libs/dual-listbox/dual-listbox.js"></script>

/* Basic DualList */
let dlb1 = new DualListbox('.select1');
/* Basic DualList */

1. You need to add these files to make fg-emoji-picker work.

• HTML
• JS

<!-- Emojji Picker JS -->
<script src="../assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script>

        new FgEmojiPicker({
            trigger: [".emoji-picker"],
            insertInto: document.querySelector(".chat-message-space"),
            closeButton: true,
            position: ['top', 'right'],
            preFetch: true,
            dir:"../assets/libs/fg-emoji-picker/"
        });

1. You need to add these files to make intl-tel-input work.

• HTML
• CSS
• JS

    <!-- intl-tel-input JS -->
    <script src="../assets/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>

        /* intl-tel-input Basic */
        const input = document.querySelector("#phone");
        window.intlTelInput(input, {
            utilsScript: "../assets/libs/intl-tel-input/build/js/utils.js"
        });
        /* intl-tel-input Basic */

1. You need to add these files to make plyr work.

• HTML
• CSS
• JS

    <!-- Plyr JS -->
    <script src="../assets/libs/plyr/plyr.min.js"></script>
        (function() {
            " use strict ";
            const player = new Plyr('#player');
            const player1 = new Plyr('#player1');
            const player2 = new Plyr('#player2');
        })();

1. You need to add these files to make sortablejs work.

• HTML
• JS

<!-- Sortable JS -->
<script src="../assets/libs/sortablejs/Sortable.min.js"></script>

/* simple sortable */
var simple = document.getElementById('simple-list');
new Sortable(simple, {
    animation: 150,
});
/* simple sortable */

1. You need to add these files to make toastify work.

• HTML
• CSS
• JS

<!-- Toastify JS -->
<script src="../assets/libs/toastify-js/src/toastify.js"></script>


/* Toastify js */
document.getElementById("toast-button").addEventListener("click", function () {
Toastify({
    text: "I'm a toast Message",
    duration: 3000,
    newWindow: true,
    close: true,
    gravity: "top", // `top` or `bottom`
    positionRight: true, // `true` or `false`
    backgroundColor: "linear-gradient(to right, var(--primary-color), rgb(215, 124, 247))"
}).showToast();
});