<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>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.