YNEX - Tailwind Admin Template

Basic example

<div class="inline-flex rounded-md shadow-sm me-5">
    <button type="button"
        class="ti-btn-group py-3 px-4 border bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Year
    </button>
    <button type="button"
        class="ti-btn-group py-3 px-4 border bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Month
    </button>
    <button type="button"
        class="ti-btn-group py-3 px-4 border bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Date
    </button>
</div>

Mixed style

<div class="ti-btn-group" role="group" aria-label="Basic mixed styles example">
    <button type="button" class="ti-btn ti-btn-danger ti-btn-wave">Year</button>
    <button type="button" class="ti-btn ti-btn-warning ti-btn-wave">Month</button>
    <button type="button" class="ti-btn ti-btn-success ti-btn-wave">Date</button>
</div>

Button group break

<div class="flex flex-col md:inline-flex md:flex-row rounded-sm shadow-sm">
    <button type="button"
        class="py-2 px-3 inline-flex justify-center items-center gap-2 -mt-px -ms-px first:rounded-t-sm last:rounded-b-sm sm:first:rounded-s-sm sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-sm border font-medium bg-white dark:bg-bodybg text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Item 1
    </button>
    <button type="button"
        class="py-2 px-3 inline-flex justify-center items-center gap-2 -mt-px -ms-px first:rounded-t-sm last:rounded-b-sm sm:first:rounded-s-sm sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-sm border font-medium bg-white dark:bg-bodybg text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Item 2
    </button>
    <button type="button"
        class="py-2 px-3 inline-flex justify-center items-center gap-2 -mt-px -ms-px first:rounded-t-sm last:rounded-b-sm sm:first:rounded-s-sm sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-sm border font-medium bg-white dark:bg-bodybg text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Item 3
    </button>
</div>

Sizing

<div class="inline-flex rounded-md shadow-sm me-6">
    <button type="button"
        class="ti-btn-group border py-3 px-4 bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Small
    </button>
    <button type="button"
        class="ti-btn-group border py-3 px-4 bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Small
    </button>
    <button type="button"
        class="ti-btn-group border py-3 px-4 bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
        Small
    </button>
</div>

<div class="inline-flex rounded-md shadow-sm me-6">
    <button type="button"
        class="ti-btn-group bg-white dark:bg-bodybg border text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50 sm:p-4 p-3">
        Default
    </button>
    <button type="button"
        class="ti-btn-group bg-white dark:bg-bodybg border text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50 sm:p-4 p-3">
        Default
    </button>
    <button type="button"
        class="ti-btn-group bg-white dark:bg-bodybg border text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50 sm:p-4 p-3">
        Default
    </button>
</div>

<div class="inline-flex rounded-md shadow-sm">
    <button type="button"
        class="ti-btn-group bg-white dark:bg-bodybg border text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50 p-[1.3125rem]">
        Large
    </button>
    <button type="button"
        class="ti-btn-group bg-white dark:bg-bodybg border text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50 p-[1.3125rem]">
        Large
    </button>
    <button type="button"
        class="ti-btn-group bg-white dark:bg-bodybg border text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50 p-[1.3125rem]">
        Large
    </button>
</div>

Vertical variation

<div class="max-w-xs flex flex-col rounded-sm shadow-sm">
<button type="button"
    class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-t-md border font-medium bg-white dark:bg-bodybg text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
    Item 1
</button>
<button type="button"
    class="-mt-px py-2 px-3 inline-flex justify-center items-center gap-2 border font-medium bg-white dark:bg-bodybg text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
    Item 2
</button>
<button type="button"
    class="-mt-px py-2 px-3 inline-flex justify-center items-center gap-2 rounded-b-md border font-medium bg-white dark:bg-bodybg text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
    Item 3
</button>
</div>

Basic Button Group

<div class="inline-flex rounded-md shadow-sm mb-5 me-5">
<button type="button" class="ti-btn-group py-3 px-4 border bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border bg-white dark:bg-bodybg text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-[#8c9097] dark:text-white/50">
    Date
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mb-5 me-5">
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-primary-full border-white/10 dark:border-white/10">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-primary-full border-white/10 dark:border-white/10">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-primary-full border-white/10 dark:border-white/10">
    Date
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mb-5 me-5">
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-secondary-full border-white/10 dark:border-white/10">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-secondary-full border-white/10 dark:border-white/10">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-secondary-full border-white/10 dark:border-white/10">
    Date
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mb-5 me-5">
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-warning-full border-white/10 dark:border-white/10">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-warning-full border-white/10 dark:border-white/10">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-warning-full border-white/10 dark:border-white/10">
    Date
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mb-5 me-5">
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-danger-full border-white/10 dark:border-white/10">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-danger-full border-white/10 dark:border-white/10">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-danger-full border-white/10 dark:border-white/10">
    Date
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mb-5 me-5">
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-info-full border-white/10 dark:border-white/10">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-info-full border-white/10 dark:border-white/10">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-info-full border-white/10 dark:border-white/10">
    Date
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mb-0">
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-success-full border-white/10 dark:border-white/10">
    Year
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-success-full border-white/10 dark:border-white/10">
    Month
</button>
<button type="button" class="ti-btn-group py-3 px-4 border ti-btn-success-full border-white/10 dark:border-white/10">
    Date
</button>
</div>

Switcher

Button group

Button group break

Basic Button Group