Code Examples
            
            
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"><div class="grid grid-cols-3 gap-8 pt-12">
    <div class="col-span-1">
        <div class="hover:shadow-none transform hover:translate-y-6 duration-500 relative shadow-xl rounded-lg bg-gray-800 h-full">
            <div class="bg-gray-900 pt-6 pb-12 text-yellow-500 font-medium text-lg text-center rounded-t-lg">
                Lorem ipsum
            </div>
            <div class="w-full flex justify-center">
                <div class="flex justify-center items-center text-xl font-semibold w-10 h-10 text-gray-900 rounded-full bg-yellow-500 shadow-lg -mt-5 z-10">1</div>
            </div>
            <div class="pt-5 pb-10 px-3 text-center text-white text-sm">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ea assumenda excepturi a nemo quam eveniet suscipit magnam id reiciendis placeat. Tempora culpa beatae quidem, at iste, illo et fugit!
            </div>
        </div>
    </div>
    <div class="col-span-1">
        <div class="hover:shadow-none transform hover:translate-y-6 duration-500 relative shadow-xl rounded-lg bg-gray-800 h-full">
            <div class="bg-gray-900 pt-6 pb-12 text-yellow-500 font-medium text-lg text-center rounded-t-lg">
                Lorem ipsum
            </div>
            <div class="w-full flex justify-center">
                <div class="flex justify-center items-center text-xl font-semibold w-10 h-10 text-gray-900 rounded-full bg-yellow-500 shadow-lg -mt-5 z-10">2</div>
            </div>
            <div class="pt-5 pb-10 px-3 text-center text-white text-sm">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ea assumenda excepturi a nemo quam eveniet suscipit magnam id reiciendis placeat. Tempora culpa beatae quidem, at iste, illo et fugit!
            </div>
        </div>
    </div>
    <div class="col-span-1">
        <div class="hover:shadow-none transform hover:translate-y-6 duration-500 relative shadow-xl rounded-lg bg-gray-800 h-full">
            <div class="bg-gray-900 pt-6 pb-12 text-yellow-500 font-medium text-lg text-center rounded-t-lg">
                Lorem ipsum
            </div>
            <div class="w-full flex justify-center">
                <div class="flex justify-center items-center text-xl font-semibold w-10 h-10 text-gray-900 rounded-full bg-yellow-500 shadow-lg -mt-5 z-10">3</div>
            </div>
            <div class="pt-5 pb-10 px-3 text-center text-white text-sm">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ea assumenda excepturi a nemo quam eveniet suscipit magnam id reiciendis placeat. Tempora culpa beatae quidem, at iste, illo et fugit!
            </div>
        </div>
    </div>
</div>