sample prompt atomic design

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/4.1.13/lib.min.js"></script>

<div class="flex flex-col gap-2 p-5">
  <p>
    1. ATOM: The Button Component
Dalam Atomic Design, Atom adalah komponen UI paling dasar yang tidak bisa dipecah lagi tanpa kehilangan fungsinya. Button adalah contoh atom yang sempurna.

Berikut adalah HTML untuk reusable Button dengan varian Primary dan Secondary:
  </p>
  <button class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300">
    Primary Action
  </button>

  <button class="px-5 py-2.5 bg-white hover:bg-gray-100 text-gray-800 font-medium rounded-lg border border-gray-300 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200">
    Secondary Action
  </button>

  <hr class="my-3"/>

  2. MOLECULE: Kombinasi Atom
  Molecule adalah gabungan dari beberapa Atom yang menyatu untuk menjalankan suatu fungsi sederhana.

  Mari kita gabungkan Atom Button di atas dengan Atom Input Text dan Atom Label untuk membuat sebuah Search Bar atau Subscription Form.

  <div class="flex flex-col sm:flex-row gap-2 max-w-md bg-white p-4 rounded-xl shadow-sm border border-gray-100">
    <input 
      type="email" 
      placeholder="Masukkan email kamu..." 
      class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 text-gray-700"
    />
    
    <button class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 whitespace-nowrap">
      Langganan
    </button>
  </div>

<hr class="my-3"/>

  3. ORGANISM: Komponen Kompleks
  Organism adalah gabungan dari beberapa Molecule (dan mungkin Atom lain) yang membentuk bagian interface yang lebih kompleks dan punya...