Simple Stats Section Using Tailwind UI

<!-- Component Inspired design by https://dribbble.com/shots/15214143-Stats-UI-Design -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

<style>
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
</style>

<div class="sm:h-screen flex flex-col justify-center w-full items-center text-[#090B2E] bg-[#EEEFF9]">
    <card class="flex flex-col w-full p-8 mx-auto space-y-8 text-gray-900 bg-white shadow-xl sm:max-w-xl rounded-xl">
        <div>
            <h1 class="mb-2 text-4xl font-semibold ">Your stats in February</h1>
            <p class="text-sm font-semibold">
                Tank you for sharing with the community!
            </p>
        </div>
        <div
            class="flex flex-col items-center justify-center space-x-0 space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
            <div
                class="flex flex-col items-start w-full p-4 rounded-sm sm:w-1/3 sm:p-8 bg-gradient-to-bl from-red-100 to-red-300">
                <h2 class="mb-12 text-sm font-semibold uppercase">views</h2>
                <div class="">
                    <h1 class="mb-2 text-4xl font-bold">477</h1>
                    <span class="text-sm font-medium text-gray-500">+29<br>views</span>
                </div>
            </div>
            <div
                class="flex flex-col items-start w-full p-4 rounded-sm sm:w-1/3 sm:p-8 bg-gradient-to-bl from-blue-100 to-blue-300">
                <h2 class="mb-12 text-sm font-semibold uppercase">Likes</h2>
                <div class="">
                    <h1 class="mb-2 text-4xl font-bold">4</h1>
                    <span class="text-sm font-medium text-gray-500">+1<br>likes</span>
                </div>
            </div>
            <div
                class="flex flex-col items-start w-full p-4 rounded-sm sm:w-1/3 sm:p-8 bg-gradient-to-bl from-green-100 to-green-300">
                <h2 class="mb-12 text-sm font-semibold uppercase">Downloads</h2>
                <div class="">
                    <h1 class="mb-2 text-4xl font-bold">7</h1>
                    <span class="text-sm font-medium text-gray-500">+2<br>downloads</span>
                </div>
            </div>
        </div>
        <button type="button"
            class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Keep
            Sharing
        </button>
    </card>
</div>