<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
  คลิกที่นี่
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700">
  ตกลง
</button>

/* styles.css */
.btn {
  @apply px-4 py-2 rounded text-white;
}

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700;
}

.btn-success {
  @apply bg-green-500 hover:bg-green-700;
}

<button class="btn btn-primary">คลิกที่นี่</button>
<button class="btn btn-success">ตกลง</button>

<div class="bg-white shadow-lg rounded-lg p-6">
  <h3 class="text-lg font-bold">การ์ดตัวอย่าง</h3>
  <p class="text-gray-600">เนื้อหาในการ์ด</p>
</div>

/* styles.css */
.card {
  @apply bg-white shadow-lg rounded-lg p-6;
}

.card-title {
  @apply text-lg font-bold;
}

.card-text {
  @apply text-gray-600;
}

<div class="card">
  <h3 class="card-title">การ์ดตัวอย่าง</h3>
  <p class="card-text">เนื้อหาในการ์ด</p>
</div>

<form>
  <label class="block text-gray-700">ชื่อ</label>
  <input type="text" class="border border-gray-300 rounded px-4 py-2 w-full">
  <button class="bg-blue-500 text-white px-4 py-2 rounded mt-4">ส่ง</button>
</form>

/* styles.css */
.form-input {
  @apply border border-gray-300 rounded px-4 py-2 w-full;
}

.form-button {
  @apply bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-700;
}

<form>
  <label class="block text-gray-700">ชื่อ</label>
  <input type="text" class="form-input">
  <button class="form-button">ส่ง</button>
</form>

/* styles.css */
.btn {
  @apply px-4 py-2 rounded text-white;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700;
}

.btn-green {
  @apply bg-green-500 hover:bg-green-700;
}

<button class="btn btn-blue">ปุ่มน้ำเงิน</button>
<button class="btn btn-green">ปุ่มเขียว</button>

// Button.jsx
export const Button = ({ children, variant }) => {
  const baseClass = "px-4 py-2 rounded text-white";
  const variantClass = variant === "primary" ? "bg-blue-500 hover:bg-blue-700" : "bg-green-500 hover:bg-green-700";

  return <button className={`${baseClass} ${variantClass}`}>{children}</button>;
};

// การใช้งาน
<Button variant="primary">ปุ่มหลัก</Button>
<Button variant="success">ปุ่มสำเร็จ</Button>

<div class="card">
  <img src="product.jpg" alt="สินค้า" class="rounded-t-lg">
  <div class="p-4">
    <h3 class="card-title">ชื่อสินค้า</h3>
    <p class="card-text">คำอธิบายสินค้า</p>
    <button class="btn btn-blue mt-4">ซื้อเลย</button>
  </div>
</div>