<head>
<script src="https://cdn.tailwindcss.com"></script>
<section id="product" class="p-6">
<div class="container mx-auto max-w-lg space-y-10">
<div class="space-y-5">
<h2 class="text-4xl font-medium">Our products</h2>
<hr />
</div>
<div class="flex items-center justify-center">
<div class="rounded-lg border border-gray-300 p-6 space-y-2">
<h3 class="text-xl">Product #1</h3>
<div class="flex items-center gap-2">
<div class="h-4 w-4 rounded-full bg-green-500"></div>
<div class="h-4 w-4 rounded-full bg-yellow-500"></div>
<div class="h-4 w-4 rounded-full bg-blue-500"></div>
</div>
</div>
<div class="rounded-lg border border-gray-300 p-6 space-y-2">
<h3 class="text-xl">Product #1</h3>
<div class="flex items-center gap-2">
<div class="h-4 w-4 rounded-full bg-green-500"></div>
<div class="h-4 w-4 rounded-full bg-yellow-500"></div>
<div class="h-4 w-4 rounded-full bg-blue-500"></div>
</div>
</div>
<div class="rounded-lg border border-gray-300 p-6 space-y-2">
<h3 class="text-xl">Product #1</h3>
<div class="flex items-center gap-2">
<div class="h-4 w-4 rounded-full bg-green-500"></div>
<div class="h-4 w-4 rounded-full bg-yellow-500"></div>
<div class="h-4 w-4 rounded-full bg-blue-500"></div>
</div>
</div>
</div>
</div>
</section>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.