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