<form class="space-y-4">
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">อีเมล</label>
    <input type="email" id="email" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm">
  </div>
  <div>
    <label for="password" class="block text-sm font-medium text-gray-700">รหัสผ่าน</label>
    <input type="password" id="password" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm">
  </div>
  <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
    ส่งข้อมูล
  </button>
</form>

<input type="text" placeholder="ชื่อของคุณ" class="form-input w-full rounded-lg border-gray-300 shadow focus:ring-2 focus:ring-blue-500">

<select class="form-select mt-1 block w-full rounded-md border-gray-300 shadow">
  <option>ตัวเลือกที่ 1</option>
  <option>ตัวเลือกที่ 2</option>
  <option>ตัวเลือกที่ 3</option>
</select>

<label class="inline-flex items-center">
  <input type="checkbox" class="form-checkbox text-blue-500">
  <span class="ml-2">ยอมรับข้อกำหนด</span>
</label>

<label class="inline-flex items-center">
  <input type="radio" name="gender" class="form-radio text-green-500">
  <span class="ml-2">ชาย</span>
</label>
<label class="inline-flex items-center">
  <input type="radio" name="gender" class="form-radio text-green-500">
  <span class="ml-2">หญิง</span>
</label>

npm install @tailwindcss/forms

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

<form class="space-y-4">
  <input type="text" placeholder="ชื่อ" class="form-input w-full">
  <input type="email" placeholder="อีเมล" class="form-input w-full">
  <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700">
    ส่งข้อมูล
  </button>
</form>

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
  ปุ่มส่งข้อมูล
</button>

<button class="border border-blue-500 text-blue-500 px-4 py-2 rounded hover:bg-blue-500 hover:text-white">
  ปุ่มแบบโปร่ง
</button>

<form class="grid grid-cols-2 gap-4">
  <div>
    <label for="first_name" class="block text-sm font-medium text-gray-700">ชื่อ</label>
    <input type="text" id="first_name" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm">
  </div>
  <div>
    <label for="last_name" class="block text-sm font-medium text-gray-700">นามสกุล</label>
    <input type="text" id="last_name" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm">
  </div>
  <div class="col-span-2">
    <label for="email" class="block text-sm font-medium text-gray-700">อีเมล</label>
    <input type="email" id="email" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm">
  </div>
  <div class="col-span-2 text-right">
    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
      ส่งข้อมูล
    </button>
  </div>
</form>

<form class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <input type="text" placeholder="ชื่อ" class="form-input">
  <input type="text" placeholder="นามสกุล" class="form-input">
  <input type="email" placeholder="อีเมล" class="form-input col-span-1 sm:col-span-2">
  <button class="bg-blue-500 text-white px-4 py-2 rounded col-span-1 sm:col-span-2">
    ส่งข้อมูล
  </button>
</form>