YNEX - Blazor Server Tailwind Css Admin Dashboard Template

Counters:

Checkbox Toggle Count

Monthly Annual

Startup

Team

Enterprise

129


<!-- Toggle -->
<div class="flex justify-end mb-3">
<div id="toggle-count" class="p-0.5 inline-block bg-gray-100 rounded-sm dark:bg-bodybg2">
<label for="toggle-count-monthly" class="relative inline-block py-2 px-3">
    <span class="inline-block relative z-10 text-sm font-medium text-gray-800 cursor-pointer dark:text-gray-200">
    Monthly
    </span>
    <input id="toggle-count-monthly" name="toggle-count" type="radio" class="absolute top-0 end-0 size-full border-transparent bg-transparent dark:bg-bodybg bg-none text-transparent rounded-sm cursor-pointer before:absolute before:inset-0 before:size-full before:rounded-sm focus:ring-offset-0 checked:before:bg-white checked:before:shadow-sm checked:bg-none focus:ring-transparent dark:checked:before:bg-bodybg dark:focus:ring-offset-transparent">
</label>
<label for="toggle-count-annual" class="relative inline-block py-2 px-3 dark:bg-bodybg2">
    <span class="inline-block relative z-10 text-sm font-medium text-gray-800 cursor-pointer dark:text-gray-200">
    Annual
    </span>
    <input id="toggle-count-annual" name="toggle-count" type="radio" class="absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-sm cursor-pointer before:absolute before:inset-0 before:size-full before:rounded-sm focus:ring-offset-0 checked:before:bg-white checked:before:shadow-sm checked:bg-none focus:ring-transparent dark:checked:before:bg-bodybg2 dark:focus:ring-offset-transparent" checked>
</label>
</div>
</div>
<!-- End Toggle -->

<!-- Card Grid -->
<div class="grid grid-cols-3 lg:items-center border border-gray-200 rounded-sm dark:border-white/10">
<!-- Card -->
<div class="flex flex-col p-4">
<h4 class="text-gray-800 mb-1 dark:text-white">Startup</h4>
<div class="flex gap-x-1">
    <span class="text-xl font-normal text-gray-800 dark:text-white">$</span>
    <p data-hs-toggle-count='{
        "target": "#toggle-count",
        "min": 19,
        "max": 29
    }' class="text-gray-800 font-semibold text-3xl dark:text-white">
    19
    </p>
</div>
</div>
<!-- End Card -->

<!-- Card -->
<div class="flex flex-col p-4">
<div class="flex justify-between">
    <h4 class="text-gray-800 mb-1 dark:text-gray-200">Team</h4>
</div>
<div class="flex gap-x-1">
    <span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
    <p data-hs-toggle-count='{
        "target": "#toggle-count",
        "min": 89,
        "max": 99
    }' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
    89
    </p>
</div>
</div>
<!-- End Card -->

<!-- Card -->
<div class="flex flex-col p-4">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Enterprise</h4>
<div class="flex gap-x-1">
    <span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
    <p data-hs-toggle-count='{
        "target": "#toggle-count",
        "min": 129,
        "max": 149
    }' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
    129
    </p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Card Grid -->

Switch Toggle Count

Monthly Annual

Startup

Team

Enterprise

129


<!-- Toggle -->
<div class="flex justify-center mb-4">
    <div>
        <label for="toggle-count-switch" class="inline-block p-2">
            <span> class="inline-block text-sm text-gray-800 cursor-pointer dark:text-white">
                Monthly
            </span>
        </label>
        <input id="toggle-count-switch" name="toggle-count-switch" type="checkbox" class="ti-switch">
        <label for="toggle-count-switch" class="inline-block p-2">
            <span> class="inline-block text-sm text-gray-800 cursor-pointer dark:text-white">
                Annual
            </span>
        </label>
    </div>
</div>
<!-- End Toggle -->

<!-- Grid -->
<div class="grid grid-cols-3 lg:items-center border border-gray-200 rounded-sm dark:border-white/10">
    <!-- Card -->
    <div class="flex flex-col p-4">
        <h4> class="text-gray-800 mb-1 dark:text-white">Startup</h4>
        <div class="flex gap-x-1">
        <span> class="text-xl font-normal text-gray-800 dark:text-white">$</span>
        <p> data-hs-toggle-count='{
            "target": "#toggle-count-switch",
            "min": 19,
            "max": 29
            }' class="text-gray-800 font-semibold text-3xl dark:text-white">
            19
        </p>
        </div>
    </div>
    <!-- End Card -->

    <!-- Card -->
    <div class="flex flex-col p-4">
        <div class="flex justify-between">
        <h4> class="text-gray-800 mb-1 dark:text-white">Team</h4>
        </div>
        <div class="flex gap-x-1">
        <span> class="text-xl font-normal text-gray-800 dark:text-white">$</span>
        <p> data-hs-toggle-count='{
            "target": "#toggle-count-switch",
            "min": 89,
            "max": 99
            }' class="text-gray-800 font-semibold text-3xl dark:text-white">
            89
        </p>
        </div>
    </div>
    <!-- End Card -->

    <!-- Card -->
    <div class="flex flex-col p-4">
        <h4> class="text-gray-800 mb-1 dark:text-white">Enterprise</h4>
        <div class="flex gap-x-1">
        <span> class="text-xl font-normal text-gray-800 dark:text-white">$</span>
        <p> data-hs-toggle-count='{
            "target": "#toggle-count-switch",
            "min": 129,
            "max": 149
            }' class="text-gray-800 font-semibold text-3xl dark:text-white">
            129
        </p>
        </div>
    </div>
    <!-- End Card -->
</div>
<!-- End Grid -->

Markup:

Basic Markup


<!-- Input Group -->
<div id="hs-wrapper-for-copy" class="space-y-3">
    <input id="hs-content-for-copy" type="text" class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:focus:ring-primary" placeholder="Enter Name">
</div>

<p class="mt-3 text-end">
    <button type="button" data-hs-copy-markup='{
        "targetSelector": "#hs-content-for-copy",
        "wrapperSelector": "#hs-wrapper-for-copy",
        "limit": 10
    }' id="hs-copy-content" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-bgdark dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primary">
    <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    Add Name
    </button>
</p>
<!-- End Input Group -->

Select Markup


<div id="hs-wrapper-select-for-copy" class="space-y-3">
<!-- Select -->
<div id="hs-content-select-for-copy" class="relative">
<select data-hs-select='{
    "placeholder": "Select option...",
    "toggleTag": "<button> type=\"button\"></button>",
    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-sm text-start text-sm focus:border-primary focus:ring-primary before:absolute before:inset-0 before:z-[1] dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primary",
    "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-sm overflow-hidden overflow-y-auto dark:bg-bodybg dark:border-white/10",
    "optionClasses": "cursor-pointer py-2 px-4 w-full text-sm text-gray-800 hover:bg-gray-100 rounded-sm focus:outline-none focus:bg-gray-100 dark:bg-bodybg dark:hover:bg-bodybg dark:text-gray-200 dark:focus:bg-bodybg",
    "optionTemplate": "<div class=\"flex justify-between w-full\"><span> data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"flex-shrink-0 size-4 text-primary\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div>"
    }'>
    <option> value=""></option>
    <option>Name</option>
    <option>Email address</option>
    <option>Description</option>
    <option>User ID</option>
</select>

<div class="absolute top-1/2 end-3 -translate-y-1/2">
    <svg class="flex-shrink-0 size-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
</div>
</div>
<!-- End Select -->
</div>
<p class="mt-3 text-end">
<button type="button" data-hs-copy-markup='{
        "targetSelector": "#hs-content-select-for-copy",
        "wrapperSelector": "#hs-wrapper-select-for-copy",
        "limit": 3
    }' id="hs-copy-select-content" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-bgdark dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primary">
    <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    Add Option
</button>
</p>

Switcher

Counters & Markup

Counters:

Startup

Team

Enterprise

Startup

Team

Enterprise

Markup: