Icon: Default

<div class="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">
            <i class="fas fa-th-large fa-3x"></i>
        </div>
        <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Manage account</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">
            <i class="fas fa-user fa-3x"></i>
        </div>
        <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">My Profile</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">
            <i class="fas fa-user-friends fa-3x"></i>
        </div>
        <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Family & Dependants</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">
            <i class="fas fa-phone-alt fa-3x"></i>
        </div>
        <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Emergency contacts</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">
            <i class="fas fa-star fa-3x"></i>
        </div>
        <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Beneficiaries</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">
            <i class="fas fa-file-alt fa-3x"></i>
        </div>
        <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Documents</div>
    </a>
</div>