@extends('layouts.master')

@section('styles')

@endsection

@section('content')

                    <div class="content">

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

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Buttons</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                        Components
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                        </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                        Buttons
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-6">
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Default Template Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn ti-btn-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Rounded Template Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title"> Template Outline Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline ti-btn-outline-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title"> Rounded Template Outline Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-outline ti-btn-outline-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Template Ghost Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-ghost-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Rounded Template Ghost Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-ghost-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Template Soft Colored Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-soft-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Rounded Template Soft Colored Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-primary">
                                    Primary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-secondary">
                                    Secondary
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-danger">
                                    Danger
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-warning">
                                    Warning
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-info">
                                    Info
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-success">
                                    Success
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-light">
                                    Light
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-soft-dark">
                                    Dark
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Default Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn bg-black/20 text-white hover:bg-gray-900 focus:ring-white/10 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-gray-500 text-white hover:bg-gray-600 focus:ring-gray-500 dark:bg-black/20 dark:hover:bg-black/30 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-red-500 text-white hover:bg-red-600 focus:ring-red-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-green-500 text-white hover:bg-green-600 focus:ring-green-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-indigo-500 text-white hover:bg-indigo-600 focus:ring-indigo-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-purple-500 text-white hover:bg-purple-600 focus:ring-purple-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-pink-500 text-white hover:bg-pink-600 focus:ring-pink-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-white text-gray-600 hover:bg-gray-50 focus:ring-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Outline Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-gray-900 text-gray-800 hover:text-white hover:bg-black/20 hover:border-white/10 focus:ring-white/10 dark:hover:bg-gray-900 dark:border-gray-900 dark:hover:border-gray-900 dark:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-gray-200 text-gray-500 hover:text-white hover:bg-gray-500 hover:border-gray-500 focus:ring-gray-200  dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-red-500 text-red-500 hover:text-white hover:bg-red-500 hover:border-red-500 focus:ring-red-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-yellow-500 text-yellow-500 hover:text-white hover:bg-yellow-500 hover:border-yellow-500 focus:ring-yellow-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-green-500 text-green-500 hover:text-white hover:bg-green-500 hover:border-green-500 focus:ring-green-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-green-500 text-blue-500 hover:text-white hover:bg-blue-500 hover:border-blue-500 focus:ring-blue-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-indigo-500 text-indigo-500 hover:text-white hover:bg-indigo-500 hover:border-indigo-500 focus:ring-indigo-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-purple-500 text-purple-500 hover:text-white hover:bg-purple-500 hover:border-purple-500 focus:ring-purple-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-pink-500 text-pink-500 hover:text-white hover:bg-pink-500 hover:border-pink-500 focus:ring-pink-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-gray-200 text-gray-400 hover:bg-white hover:border-white focus:ring-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Ghost Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn text-gray-800 hover:bg-gray-100 focus:ring-white/10 dark:text-white dark:hover:bg-gray-900 dark:hover:border-gray-900 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-gray-500 hover:bg-gray-100 focus:ring-gray-500 dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-red-500 hover:bg-red-100 focus:ring-red-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-orange-500 hover:bg-orange-100 focus:ring-orange-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-green-500 hover:bg-green-100 focus:ring-green-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-blue-500 hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-indigo-500 hover:bg-indigo-100 focus:ring-indigo-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-purple-500 hover:bg-purple-100 focus:ring-purple-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-pink-500 hover:bg-pink-100 focus:ring-pink-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-gray-200 hover:bg-white hover:text-gray-600 focus:ring-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Soft Colored Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn bg-gray-500/10 text-gray-800 hover:text-white hover:bg-black/20 ring-offset-white focus:ring-white/10 dark:bg-black/20 dark:hover:bg-gray-900 dark:text-white">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-gray-500/10 text-gray-500 hover:text-white hover:bg-gray-500 ring-offset-white focus:ring-gray-500 dark:bg-black/20 dark:hover:bg-black/30 dark:focus:ring-gray-600 dark:text-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-red-500/10 text-red-500 hover:text-white hover:bg-red-500 ring-offset-white focus:ring-red-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-orange-500/10 text-orange-500 hover:text-white hover:bg-orange-500 ring-offset-white focus:ring-orange-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-green-500/10 text-green-500 hover:text-white hover:bg-green-500 ring-offset-white focus:ring-green-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-blue-500/10 text-blue-500 hover:text-white hover:bg-blue-500 ring-offset-white focus:ring-blue-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-indigo-500/10 text-indigo-500 hover:text-white hover:bg-indigo-500 ring-offset-white focus:ring-indigo-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-purple-500/10 text-purple-500 hover:text-white hover:bg-purple-500 ring-offset-white focus:ring-purple-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-gray-50 text-gray-500 hover:text-gray-600 hover:bg-white ring-offset-white focus:ring-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Button Sizes</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="py-2 px-3 ti-btn ti-btn-primary">
                                    Small Button
                                    </button>
                                    <button type="button"
                                    class="py-3 px-4 ti-btn ti-btn-primary">
                                    Default Button
                                    </button>
                                    <button type="button"
                                    class="py-3 px-4 ti-btn bg-primary text-white hover:bg-primary focus:ring-primary sm:p-5 dark:focus:ring-offset-white/10">
                                    Large Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Block Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="w-full ti-btn ti-btn-primary">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="w-full ti-btn font-medium border-gray-200 bg-white text-gray-700 align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Button Types</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn bg-primary text-white hover:bg-primary  focus:ring-primary  dark:focus:ring-offset-white/10">
                                    Solid
                                    </button>
                                    <button type="button"
                                    class="ti-btn ti-btn-outline border-gray-200 text-primary hover:text-white hover:bg-primary hover:border-primary  focus:ring-primary  dark:border-white/10 dark:hover:border-primary">
                                    Outline
                                    </button>
                                    <button type="button" class="ti-btn text-primary hover:bg-primary/30  focus:ring-primary ">
                                    Ghost
                                    </button>
                                    <button type="button"
                                    class="ti-btn bg-primary/30 text-primary hover:text-white hover:bg-primary  ring-offset-white focus:ring-primary ">
                                    Soft
                                    </button>
                                    <button type="button"
                                    class="ti-btn font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    White
                                    </button>
                                    <button type="button"
                                    class="ti-btn text-primary hover:text-primary  ring-offset-white focus:ring-primary ">
                                    Link
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Pilled Button</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button"
                                    class="ti-btn rounded-full ti-btn-primary">
                                    Button
                                    </button>
                                    <button type="button"
                                    class="ti-btn rounded-full border-gray-200 bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    Button
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Buttons With Icons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button" class="ti-btn ti-btn-primary">
                                    Add to cart
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        viewBox="0 0 16 16">
                                        <path
                                        d="M5.071 1.243a.5.5 0 0 1 .858.514L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 6h1.717L5.07 1.243zM3.5 10.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3z" />
                                    </svg>
                                    </button>
                                    <button type="button" class="ti-btn border-gray-200 font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    Signup free
                                    <svg class="w-2.5 h-auto" width="17" height="16" viewBox="0 0 17 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M1 7C0.447715 7 -3.73832e-07 7.44771 -3.49691e-07 8C-3.2555e-07 8.55228 0.447715 9 1 9L13.0858 9L7.79289 14.2929C7.40237 14.6834 7.40237 15.3166 7.79289 15.7071C8.18342 16.0976 8.81658 16.0976 9.20711 15.7071L16.0303 8.88388C16.5185 8.39573 16.5185 7.60427 16.0303 7.11612L9.20711 0.292893C8.81658 -0.0976318 8.18342 -0.0976318 7.79289 0.292893C7.40237 0.683417 7.40237 1.31658 7.79289 1.70711L13.0858 7L1 7Z"
                                        fill="currentColor" />
                                    </svg>
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Buttons With Fixed Width And Height</h5>
                                </div>
                                <div class="box-body">
                                    <button aria-label="button" type="button" class="ti-btn flex-shrink-0 h-[2.875rem] w-[2.875rem] ti-btn-primary">
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M5.071 1.243a.5.5 0 0 1 .858.514L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 6h1.717L5.07 1.243zM3.5 10.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3z"/>
                                    </svg>
                                    </button>
                                    <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.875rem] w-[2.875rem] rounded-sm border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-primary rounded-full" role="status" aria-label="loading">
                                        <span class="sr-only">Loading...</span>
                                    </span>
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Rounded Fixed Width And Height Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button aria-label="button" type="button" class="rounded-full ti-btn flex-shrink-0 h-[2.875rem] w-[2.875rem] ti-btn-primary">
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M5.071 1.243a.5.5 0 0 1 .858.514L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 6h1.717L5.07 1.243zM3.5 10.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3z"/>
                                    </svg>
                                    </button>
                                    <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.875rem] w-[2.875rem] rounded-full border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-primary rounded-full" role="status" aria-label="loading">
                                        <span class="sr-only">Loading...</span>
                                    </span>
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Buttons Sizes With Icons</h5>
                                </div>
                                <div class="box-body">
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-primary text-white hover:bg-primary focus:ring-0 focus:ring-primary dark:focus:ring-offset-white/10">
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                    </svg>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.875rem] w-[2.875rem] bg-primary text-white hover:bg-primary focus:ring-0 focus:ring-primary dark:focus:ring-offset-white/10">
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                    </svg>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[3.875rem] w-[3.875rem] bg-primary text-white hover:bg-primary focus:ring-0 focus:ring-primary dark:focus:ring-offset-white/10">
                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                    </svg>
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Rounded Buttons Sizes With Icons</h5>
                                </div>
                                <div class="box-body">
                                    <button aria-label="button" type="button" class="rounded-full ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-primary text-white hover:bg-primary focus:ring-0 focus:ring-primary dark:focus:ring-offset-white/10">
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                    </svg>
                                    </button>
                                    <button aria-label="button" type="button" class="rounded-full ti-btn p-0 flex-shrink-0 h-[2.875rem] w-[2.875rem] bg-primary text-white hover:bg-primary focus:ring-0 focus:ring-primary dark:focus:ring-offset-white/10">
                                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                    </svg>
                                    </button>
                                    <button aria-label="button" type="button" class="rounded-full ti-btn p-0 flex-shrink-0 h-[3.875rem] w-[3.875rem] bg-primary text-white hover:bg-primary focus:ring-0 focus:ring-primary dark:focus:ring-offset-white/10">
                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                    </svg>
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-8">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Button Group With Sizes</h5>
                                </div>
                                <div class="box-body space-y-2">
                                    <div class="inline-flex rounded-md shadow-sm ltr:mr-6 rtl:ml-6">
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70">
                                        Small
                                        </button>
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70">
                                        Small
                                        </button>
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70">
                                        Small
                                        </button>
                                    </div>

                                    <div class="inline-flex rounded-md shadow-sm ltr:mr-6 rtl:ml-6">
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 sm:p-4 p-3">
                                        Default
                                        </button>
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 sm:p-4 p-3">
                                        Default
                                        </button>
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 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 text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 sm:p-[1.3125rem]">
                                        Large
                                        </button>
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 sm:p-[1.3125rem]">
                                        Large
                                        </button>
                                        <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 sm:p-[1.3125rem]">
                                        Large
                                        </button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-4">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Buttons with Loading</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button" class="ti-btn p-0 flex-shrink-0 h-[2.875rem] w-[2.875rem] ti-btn-primary">
                                    <span class="sr-only">Loading...</span>
                                    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
                                        <span class="sr-only">Loading...</span>
                                    </span>
                                    </button>
                                    <button type="button" class="ti-btn ti-btn-primary">
                                    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
                                    Loading
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Disabled Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button" class="sm:m-0 ti-btn ti-btn-disabled bg-primary text-white focus:ring-primary" disabled>
                                    Disabled
                                    </button>
                                    <button type="button" class="sm:m-0 ti-btn ti-btn-disabled border-gray-200 font-medium bg-white text-gray-500 shadow-sm align-middle focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" disabled>
                                    Disabled
                                    </button>
                                    <button type="button" class="sm:m-0 ti-btn ti-btn-disabled p-0 flex-shrink-0 h-[2.875rem] w-[2.875rem] ti-btn-primary" disabled>
                                    <span class="sr-only">Loading...</span>
                                    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
                                        <span class="sr-only">Loading...</span>
                                    </span>
                                    </button>
                                    <button type="button" class="sm:m-0 ti-btn ti-btn-disabled ti-btn-primary" disabled>
                                    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
                                    Loading
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Button Widths</h5>
                                </div>
                                <div class="box-body">
                                    <button type="button" class="ti-btn ti-btn-primary w-full max-w-[5.625rem]">XS</button>
                                    <button type="button" class="ti-btn ti-btn-secondary w-full max-w-[6.975rem]">SM</button>
                                    <button type="button" class="ti-btn ti-btn-warning w-full max-w-[8.125rem]">MD</button>
                                    <button type="button" class="ti-btn ti-btn-info w-full max-w-[9.375rem]">LG</button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Social Icon Buttons</h5>
                                </div>
                                <div class="box-body">
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-[#3b5998] text-white hover:bg-[#3b5998] focus:ring-0 focus:ring-[#3b5998] dark:focus:ring-offset-white/10 ti-btn-facebook">
                                        <i class="ri-facebook-line"></i>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-[#00acee] text-white hover:bg-[#00acee] focus:ring-0 focus:ring-[#00acee] dark:focus:ring-offset-white/10 ti-btn-twitter">
                                        <i class="ri-twitter-line"></i>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-instagram text-white hover:bg-instagram focus:ring-0 focus:ring-instagram dark:focus:ring-offset-white/10 ti-btn-instagram">
                                        <i class="ri-instagram-line"></i>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-[#333] text-white hover:bg-[#333] focus:ring-0 focus:ring-[#333] dark:focus:ring-offset-white/10 ti-btn-github">
                                        <i class="ri-github-line"></i>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-[#FF0000] text-white hover:bg-[#FF0000] focus:ring-0 focus:ring-[#FF0000] dark:focus:ring-offset-white/10 ti-btn-youtube">
                                        <i class="ri-youtube-line"></i>
                                    </button>
                                    <button aria-label="button" type="button" class="ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] bg-[#3cba54] text-white hover:bg-[#3cba54] focus:ring-0 focus:ring-[#3cba54] dark:focus:ring-offset-white/10 ti-btn-google">
                                        <i class="ri-google-line"></i>
                                    </button>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Button group break</h5>
                                </div>
                                <div class="box-body">
                                    <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 ltr:-ml-px rtl:-mr-px first:rounded-t-sm last:rounded-b-sm ltr:sm:first:rounded-l-sm rtl:sm:first:rounded-r-sm sm:mt-0 ltr:sm:first:ml-0 rtl:sm:first:mr-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-r-sm rtl:sm:last:rounded-l-sm border font-medium bg-white 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-white/70">
                                        Item 1
                                    </button>
                                    <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 -mt-px ltr:-ml-px rtl:-mr-px first:rounded-t-sm last:rounded-b-sm ltr:sm:first:rounded-l-sm rtl:sm:first:rounded-r-sm sm:mt-0 ltr:sm:first:ml-0 rtl:sm:first:mr-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-r-sm rtl:sm:last:rounded-l-sm border font-medium bg-white 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-white/70">
                                        Item 2
                                    </button>
                                    <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 -mt-px ltr:-ml-px rtl:-mr-px first:rounded-t-sm last:rounded-b-sm ltr:sm:first:rounded-l-sm rtl:sm:first:rounded-r-sm sm:mt-0 ltr:sm:first:ml-0 rtl:sm:first:mr-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-r-sm rtl:sm:last:rounded-l-sm border font-medium bg-white 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-white/70">
                                        Item 3
                                    </button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xl:col-span-3">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Vertical Button Group</h5>
                                </div>
                                <div class="box-body">
                                    <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 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-white/70">
                                        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 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-white/70">
                                        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 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-white/70">
                                        Item 3
                                    </button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Basic Button Group</h5>
                                </div>
                                <div class="box-body">
                                    <div class="inline-flex rounded-md shadow-sm mb-5 ltr:mr-5 rtl:ml-5">
                                    <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70">
                                        Date
                                    </button>
                                    </div>
                                    <div class="inline-flex rounded-md shadow-sm mb-5 ltr:mr-5 rtl:ml-5">
                                    <button type="button" class="ti-btn-group ti-btn-primary border-white/10 dark:border-white/10">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-primary border-white/10 dark:border-white/10">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-primary border-white/10 dark:border-white/10">
                                        Date
                                    </button>
                                    </div>
                                    <div class="inline-flex rounded-md shadow-sm mb-5 ltr:mr-5 rtl:ml-5">
                                    <button type="button" class="ti-btn-group ti-btn-secondary border-white/10 dark:border-white/10">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-secondary border-white/10 dark:border-white/10">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-secondary border-white/10 dark:border-white/10">
                                        Date
                                    </button>
                                    </div>
                                    <div class="inline-flex rounded-md shadow-sm mb-5 ltr:mr-5 rtl:ml-5">
                                    <button type="button" class="ti-btn-group ti-btn-warning border-white/10 dark:border-white/10">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-warning border-white/10 dark:border-white/10">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-warning border-white/10 dark:border-white/10">
                                        Date
                                    </button>
                                    </div>
                                    <div class="inline-flex rounded-md shadow-sm mb-5 ltr:mr-5 rtl:ml-5">
                                    <button type="button" class="ti-btn-group ti-btn-danger border-white/10 dark:border-white/10">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-danger border-white/10 dark:border-white/10">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-danger border-white/10 dark:border-white/10">
                                        Date
                                    </button>
                                    </div>
                                    <div class="inline-flex rounded-md shadow-sm mb-5 ltr:mr-5 rtl:ml-5">
                                    <button type="button" class="ti-btn-group ti-btn-info border-white/10 dark:border-white/10">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-info border-white/10 dark:border-white/10">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-info 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 ti-btn-success border-white/10 dark:border-white/10">
                                        Year
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-success border-white/10 dark:border-white/10">
                                        Month
                                    </button>
                                    <button type="button" class="ti-btn-group ti-btn-success border-white/10 dark:border-white/10">
                                        Date
                                    </button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-1 -->

                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

@endsection