Zynix - Premium Tailwind CSS Admin 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 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! 😊

Zynix is a Premium Tailwind CSS Admin Template using modern and minimal design. It is fully flexible user-friendly and responsive. Zynix Modern template is powered with HTML 5, SASS, & Tailwind which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 180+ 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 using Tailwind 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 Zynix Premium Tailwind Admin Template, you will be able to get free download of all future updates.

• Tailwind v3.4.17
• Preline v2.7.0
• Sass
• Esbuild v0.19.4

• Firefox
• Safari
• Opera
• Chrome
• Edge

• Esbuild:

  esbuild is a blazing-fast JavaScript bundler and minifier designed for modern web development workflows. It is known for its exceptional speed, minimal configuration, and powerful features. Check here.

Prerequisites

Please follow below steps to install and setup all pre requisites:

• Nodejs

  Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

  Note : If you are using the latest version of Node JS or want to install and use the latest version, click here

• Esbuild

  To get started with esbuild, you need to install globally on your system. You can install it using npm by running the following command npm install -g esbuild or npm install --save-dev esbuild from your terminal.

Installation

Please follow below steps to install and setup all pre requisites:

• Install Prerequisites

  Make sure to have all above pre requisites installed & running in your computer

• Install Dependencies

  Open your terminal, go to your folder and enter the command npm install. This would install all required dependencies in node_modules folder.

After you finished with the above steps, you can run the following commands into the terminal/command prompt from the root directory ( Zynix/Html ) of the project to run the project locally or build for production use: npm run dev

Note:- please ensure that you have installed all node_modules requried to run Esbuild tasks .

    src/
    ├── assets/
    ├── |-- audio/
    ├── |-- icon-fonts/
    |   |-- |-- bootstrap-icons/
    |   |-- |-- boxicons/
    |   |-- |-- feather/
    |   |-- |-- line-awesome/
    |   |-- |-- Remixicon/
    |   |-- |-- tabler-icons/
    ├── |-- images/
    ├── |-- js/
    ├── |-- scss/
    |   |-- |-- custom/
    |   |-- |-- menu-styles/
    |   |-- |-- pages/
    |   |-- |-- tailwind/
    |   |-- |-- util/
    |   |-- |-- _icons.scss
    |   |-- |-- _switcher.scss
    |   |-- |-- _variables.scss
    |   |-- |-- styles.scss
    ├── |-- video/
    ├── html/
    |   |-- partials/
    |   |-- |-- commonjs.html
    |   |-- |-- custom-switcherjs.html
    |   |-- |-- footer.html
    |   |-- |-- header.html
    |   |-- |-- loader.html
    |   |-- |-- mainhead.html
    |   |-- |-- responsive-search-modal.html
    |   |-- |-- sidebar.html
    |   |-- |-- switcher.html
    esbuild.config.js
    package.json
    package-lock.json
    postcss.config.js
    tailwind.config.js

• Zynix Premium Tailwind CSS Admin Template / : Root template folder contain all html, js, css, scss, images and other files.
• • assets/ : Folder contain all the Zynix 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 <!-- include sample.html"-->

• esbuild.config.js : esbuild.config js 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 src folder.

Step-2: Remove "esbuild.config.js", "package.json", "package-lock.json" files.

Step-3: You can use only dist folder,if you dont want to use scss.

General HTML file structure of the Xintra template src Folder.

Root:html/empty.html

    <!-- include mainhead.html"-->

</head>

<body>

    <!-- include switcher.html"-->
    <!-- include loader.html"-->

    <div class="page">
        <!-- include header.html"-->
        <!-- include sidebar.html"-->

        <!-- Start::app-content -->
        <div class="main-content app-content">
            <div class="container-fluid">

                <!-- Page Header -->
                <div class="flex items-center justify-between page-header-breadcrumb flex-wrap gap-2">
                    <div>
                        <h1 class="page-title font-medium text-lg mb-2">Empty</h1>
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0);">
                                        Pages
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Empty</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="flex flex-wrap gap-2"> 
                        <button class="ti-btn ti-btn-soft-primary btn-wave  waves-effect waves-light 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 waves-effect waves-light"> 
                            <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">
                    <div class="xl:col-span-12">
                        <div class="box">
                            <div class="box-body">
                                <h6 class="mb-0">EMPTY CARD</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End::row-1 -->

            </div>
        </div>
        <!-- End::app-content -->

        <!-- include footer.html"-->
        <!-- include responsive-search-modal.html"-->

    </div>

    <!-- include commonjs.html"-->

<!-- include custom-switcherjs.html"-->

    <!-- Custom JS -->
    <script src="../assets/js/custom.js"></script>

</body>

</html>

 <html lang="en" dir="ltr" data-nav-layout="vertical" class="light" data-header-styles="light" data-menu-styles="light" data-width="fullwidth" data-toggled="close">
                                

<html lang="en" dir="ltr" data-nav-layout="vertical" class="light" data-header-styles="light" data-menu-styles="light" data-width="fullwidth" data-toggled="close">
                                

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

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

• HTML
• CSS
• JS

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

/* 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

/* 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

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

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

• HTML
• CSS
• JS

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

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

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

• HTML
• CSS
• JS

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

• HTML
• CSS
• JS

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

• HTML
• JS

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

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

• HTML
• CSS
• JS

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

• HTML
• CSS
• JS

/* 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

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

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

• HTML
• CSS
• JS

    /* 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

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

• HTML
• CSS
• JS

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

• HTML
• CSS
• JS

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

• HTML
• JS

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

• HTML
• CSS
• JS

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

• HTML
• CSS
• JS

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

• HTML
• JS

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

• HTML
• CSS
• JS