🧩 Tailwind CSS: Tạo Modal, Form, Buttons và Alerts

Dưới đây là phần tiếp theo trong chuỗi bài học Tailwind CSS thực chiến, giúp bạn làm chủ các thành phần tương tác cơ bản: Modal (hộp thoại bật lên), Form (biểu mẫu), Buttons (nút bấm), và Alerts (thông báo) – những khối xây dựng không thể thiếu trong mọi ứng dụng web hiện đại.

NỘI DUNG

🎯 Mục tiêu

Thiết kế nút bấm chuẩn UI/UX với hiệu ứng hover, focus
Tạo biểu mẫu (form) đẹp, dễ sử dụng
Hiển thị alert cảnh báo, thành công, lỗi
Tạo Modal popup dùng JavaScript đơn giản

🔹 1. Buttons – Nút bấm linh hoạt

<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 transition">
  Gửi yêu cầu
</button>

Class	Chức năng
`bg-blue-600`	Màu nền
`hover:bg-blue-700`	Đổi màu khi hover
`focus:ring-2`	Hiệu ứng focus accessibility
`rounded`	Bo góc
`transition`	Làm mượt hover/focus

🎨 Bạn có thể tạo các biến thể:

bg-gray-100 text-gray-700 border → Nút phụ
bg-red-600 → Nút xóa

🔹 2. Form – Biểu mẫu đẹp, dễ điền

<form class="max-w-md mx-auto space-y-4">
  <div>
    <label class="block mb-1 text-sm font-medium">Email</label>
    <input type="email" class="w-full border border-gray-300 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="example@email.com">
  </div>
  <div>
    <label class="block mb-1 text-sm font-medium">Mật khẩu</label>
    <input type="password" class="w-full border border-gray-300 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••">
  </div>
  <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
    Đăng nhập
  </button>
</form>

✅ Sử dụng space-y-4 để tạo khoảng cách giữa các trường.

🔹 3. Alerts – Thông báo UI (success, error, warning)

<!-- Success -->
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Thành công!</strong>
  <span class="block sm:inline">Dữ liệu đã được lưu.</span>
</div>

<!-- Error -->
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-4" role="alert">
  <strong class="font-bold">Lỗi!</strong>
  <span class="block sm:inline">Vui lòng kiểm tra lại dữ liệu.</span>
</div>

📌 Các màu thay đổi theo mức độ:

bg-green-100 → success
bg-yellow-100 → warning
bg-red-100 → error
bg-blue-100 → info

🔹 4. Modal – Hộp thoại bật lên

HTML + JavaScript đơn giản:

<!-- Nút mở modal -->
<button onclick="document.getElementById('modal').classList.remove('hidden')" class="bg-blue-600 text-white px-4 py-2 rounded">
  Mở Modal
</button>

<!-- Modal overlay -->
<div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
  <div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full relative">
    <button onclick="document.getElementById('modal').classList.add('hidden')" class="absolute top-2 right-2 text-gray-400 hover:text-black">
      ✕
    </button>
    <h3 class="text-xl font-bold mb-4">Thông báo</h3>
    <p class="mb-4">Bạn có chắc chắn muốn thực hiện hành động này không?</p>
    <div class="flex justify-end gap-2">
      <button onclick="document.getElementById('modal').classList.add('hidden')" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Huỷ</button>
      <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Xác nhận</button>
    </div>
  </div>
</div>

✅ Giải thích:

Modal là một div phủ toàn màn hình (fixed inset-0)
Dùng bg-opacity-50 để làm mờ nền
Có thể mở bằng classList.remove('hidden') và đóng bằng add('hidden')

✅ Kết luận

Với Tailwind CSS, bạn có thể:

Tạo form đẹp và khả dụng nhanh chóng
Thiết kế nút bấm chuẩn UX
Hiển thị alert tương tác thông báo trạng thái
Hiển thị modal mà không cần thêm thư viện UI bên ngoài

Tất cả đều chỉ cần HTML + class tiện ích của Tailwind – giao diện đẹp, không viết CSS thủ công

HTML, CSS