Icon: Layouts

<div class="">
    <div class="text-3xl font-bold mb-10">Icon Layouts</div>

    <div class="text-lg font-bold mb-6">If 2 icons:</div>
    <div class="mb-20 grid grid-cols-2 gap-px bg-dark/10">
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
    </div>

    <div class="text-lg font-bold mb-6">If 3, 5 or 6 icons:</div>
    <div class="mb-20 grid grid-cols-2 sm:grid-cols-3 gap-px bg-dark/10">
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
    </div>

    <div class="text-lg font-bold mb-6">If 4, 7+ icons:</div>
    <div class="mb-20 grid grid-cols-2 sm:grid-cols-4 gap-px bg-dark/10">
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light"></div>
        </a>
    </div>
</div>