<?php
/*
 * This file is part of the CLIENTXCMS project.
 * It is the property of the CLIENTXCMS association.
 *
 * Personal and non-commercial use of this source code is permitted.
 * However, any use in a project that generates profit (directly or indirectly),
 * or any reuse for commercial purposes, requires prior authorization from CLIENTXCMS.
 *
 * To request permission or for more information, please contact our support:
 * https://clientxcms.com/client/support
 *
 * Learn more about CLIENTXCMS License at:
 * https://clientxcms.com/eula
 *
 * Year: 2025
 */
?>
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">

<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-4" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
    <div class="bg-gray-100 w-full flex flex-col text-start hover:bg-gray-100 focus:outline-none focus:bg-gray-100 p-3 md:p-5 rounded-xl dark:bg-neutral-800 dark:hover:bg-neutral-900 dark:focus:bg-neutral-800">
        <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 text-gray-800 dark:text-blue-500 dark:text-white "></i>
        <span class="mt-5">
        <span class="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200">Lorem ipsum dolor sit amet</span>
        <span class="lg:block mt-2 text-gray-800 dark:text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </span>
    </div>
    <div class="bg-gray-100 w-full flex flex-col text-start hover:bg-gray-100 focus:outline-none focus:bg-gray-100 p-3 md:p-5 rounded-xl dark:bg-neutral-800 dark:hover:bg-neutral-900 dark:focus:bg-neutral-800">
        <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 text-gray-800 dark:text-blue-500 dark:text-white "></i>
        <span class="mt-5">
        <span class="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200">Lorem ipsum dolor sit amet</span>
        <span class="lg:block mt-2 text-gray-800 dark:text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </span>
    </div>
    <div class="bg-gray-100 w-full flex flex-col text-start hover:bg-gray-100 focus:outline-none focus:bg-gray-100 p-3 md:p-5 rounded-xl dark:bg-neutral-800 dark:hover:bg-neutral-900 dark:focus:bg-neutral-800">
        <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 text-gray-800 dark:text-blue-500 dark:text-white "></i>
        <span class="mt-5">
        <span class="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200">Lorem ipsum dolor sit amet</span>
        <span class="lg:block mt-2 text-gray-800 dark:text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </span>
    </div>
    <div class="bg-gray-100 w-full flex flex-col text-start hover:bg-gray-100 focus:outline-none focus:bg-gray-100 p-3 md:p-5 rounded-xl dark:bg-neutral-800 dark:hover:bg-neutral-900 dark:focus:bg-neutral-800">
        <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 text-gray-800 dark:text-blue-500 dark:text-white "></i>
        <span class="mt-5">
        <span class="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200">Lorem ipsum dolor sit amet</span>
        <span class="lg:block mt-2 text-gray-800 dark:text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </span>
    </div>
</div>
</div>
