Features Section using Tailwind CSS

<section class="min-h-screen flex items-center bg-gray-100 py-14">
    <div class="container mx-auto px-10">
        <div class="grid xl:grid-cols-4">
            <div class="xl:col-start-2 col-span-2">
                <div class="mb-5 text-center">
                    <h5 class="text-md text-xl mb-3 text-gray-500">What we do</h5>
                    <h1 class="text-4xl font-semibold font-secondary mb-0">Amazing features to convince you to use
                        our application</h1>
                </div>
            </div>
        </div>
        <div class="grid lg:grid-cols-3 md:grid-cols-2 justify-center gap-8 mt-8">
            <div class="text-center transition-all duration-300 ease-in-out p-10 rounded hover:bg-white">
                <img src="images/01.png" alt="" class="mx-auto">
                <h2 class="text-xl font-semibold mt-5 mb-4">Random Cleaning</h2>
                <p class="text-gray-400 mb-5 pb-2">Aliquam diam egestas pretium in rhoncus sed pharetra.</p>
                <button class="px-4 py-2 border rounded text-gray-800 hover:text-green-600">Learn More</button>
            </div>
            <div class="text-center relative bg-white p-10 rounded">
                <div class="after:content-[''] after:bg-[url('/images/bg-1.png')] after:w-44 after:h-44">
                    <img src="images/02.png" alt="" class="mx-auto">
                </div>
                <h2 class="text-xl font-semibold mt-5 mb-4">Messaging Option</h2>
                <p class="text-gray-400 mb-5 pb-2">Aliquam diam egestas pretium in rhoncus sed pharetra.</p>
                <button class="px-4 py-2 border rounded text-gray-800 hover:text-green-600">Learn More</button>
            </div>
            <div class="text-center transition-all duration-300 ease-in-out p-10 rounded hover:bg-white">
                <img src="images/03.png" alt="" class="mx-auto">
                <h2 class="text-xl font-semibold mt-5 mb-4">Quick Boostup</h2>
                <p class="text-gray-400 mb-5 pb-2">Aliquam diam egestas pretium in rhoncus sed pharetra.</p>
                <button class="px-4 py-2 border rounded text-gray-800 hover:text-green-600">Learn More</button>
            </div>
        </div>
    </div>
</section>

<!--google font-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Poppins:wght@300;400;500;600&display=swap">
<!-- Confing File -->
<script>
        tailwind.config = {
            theme: {
                fontFamily: { 
                    'body': ['Lato'],
                    'secondary': ['Poppins']
                }
            }
        }
    </script>