sample atom, molecules, organism

by oktaviardi pratama

HTML

<script src="https://cdn.tailwindcss.com"></script>

<div class="p-8 bg-gray-50 min-h-screen space-y-12 flex flex-col items-center">

  <div class="w-full max-w-[500px] space-y-4">
    <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400">1 & 2. Kumpulan Atom & Molecule Baru</h3>
    
    <div class="flex gap-4 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs py-2 px-4 rounded-xl transition-colors">
        Primary Button
      </button>
      <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold text-xs py-2 px-4 rounded-xl transition-colors">
        Secondary Button
      </button>
    </div>

    <div class="flex gap-3 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
      <span class="px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider bg-blue-600 text-white rounded">NEW</span>
      <span class="px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider bg-red-500 text-white rounded">SALE</span>
      <span class="px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider bg-amber-500 text-white rounded">HOT</span>
    </div>
  </div>

  <div class="w-full max-w-[500px]">
    <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-2">3. Organism (Product Card Modifikasi)</h3>
    
    <article class="w-[500px] h-[300px] flex bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-all duration-300 relative">
      
      <div class="relative w-[200px] h-full bg-gray-100 flex-shrink-0 overflow-hidden">
        <img 
          src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&auto=format&fit=crop&q=60" 
          alt="Product Image" 
          class="object-cover w-full h-full hover:scale-105 transition-transform duration-500" 
        />
        
        <div class="absolute top-3 left-3 flex flex-col...