Grids

<h6 class="mb-4 font-medium text-sm dark:text-slate-400">Small Grid</h6>
<div class="grid sm:grid-cols-12 gap-4">
    <div class="sm:col-span-12 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">sm:col-span-12</h6>
    </div><!--end col-->
</div><!--end grid-->

<h6 class="my-4 font-medium text-sm  dark:text-slate-400">Medium Grid</h6>
<div class="grid sm:grid-cols-12 md:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">md:col-span-6</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">md:col-span-6</h6>
    </div><!--end col-->
</div><!--end grid-->

<h6 class="my-4 font-medium text-sm  dark:text-slate-400">Large Grid</h6>
<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">lg:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">lg:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">lg:col-span-4</h6>
    </div><!--end col-->
</div><!--end grid-->

<h6 class="my-4 font-medium text-sm  dark:text-slate-400">Extra Large Grid</h6>
<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->                                        
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->  
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->                                    
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-4</h6>
    </div><!--end col-->                                   
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-6 xl:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-6</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-6 xl:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-6</h6>
    </div><!--end col-->                               
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-12</h6>
    </div><!--end col-->                          
</div><!--end grid-->

                                       
<div class="grid grid-cols-12 gap-4 mb-4">
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-1 col-end-4">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->
     
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-end-13">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->                                    
</div><!--end grid-->

<div class="grid grid-cols-12 gap-4 mb-4">
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-4">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->
     
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-7">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->                                    
</div><!--end grid-->

<div class="grid grid-cols-12 gap-4 mb-4">
    <div class="col-span-8 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-3">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-8</h6>
    </div><!--end col-->                               
</div><!--end grid-->

<div class="grid grid-cols-5 gap-4 mb-4">
    <div class="col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-1">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-1</h6>
    </div><!--end col-->    
    <div class="col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-3">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-1</h6>
    </div><!--end col-->                               
    <div class="col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-5">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-1</h6>
    </div><!--end col-->    
</div><!--end grid-->