<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evento - Landing Page: Stats Section</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-slate-100 py-6 sm:py-8 lg:py-12">
<div class="mx-auto max-w-screen-xl px-4 md:px-8">
<div class="grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-8">
<!-- stat - start -->
<div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 lg:p-8">
<div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">50+</div>
<div class="text-sm font-semibold sm:text-base">Webinar</div>
</div>
<!-- stat - end -->
<!-- stat - start -->
<div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 md:p-8">
<div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">5000+</div>
<div class="text-sm font-semibold sm:text-base">Attended</div>
</div>
<!-- stat - start -->
<div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 md:p-8">
<div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">400+</div>
<div class="text-sm font-semibold sm:text-base">Hours</div>
</div>
<!-- stat - end -->
<!-- stat - start -->
<div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 md:p-8">
<div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">6000+</div>
<div class="text-sm font-semibold sm:text-base">Subscriber</div>
</div>
<!-- stat - end -->
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.