Bài 29: Thực hành – tạo form liên hệ có responsive và hiệu ứng đầy đủ bằng Tailwind CSS

Đây là lúc bạn gom toàn bộ kỹ năng đã học để xây dựng một giao diện hoàn chỉnh. Không còn là những ví dụ nhỏ nữa, chúng ta sẽ cùng làm một form liên hệ chuyên nghiệp, đẹp mắt, responsive, có hiệu ứng và dễ dùng.

Form liên hệ là một phần gần như không thể thiếu trên website.
Nó không chỉ giúp người dùng gửi thông tin, mà còn là nơi thể hiện sự chuyên nghiệp, thân thiện và đồng bộ trong thiết kế.

Trong bài thực hành hôm nay, bạn sẽ:

• Xây dựng form liên hệ với input, textarea, checkbox và button
• Sử dụng layout responsive
• Áp dụng hiệu ứng focus, hover, transition
• Hỗ trợ Dark Mode tự động (nếu bật dark mode trên máy)

Bạn sẽ thấy Tailwind phát huy sức mạnh thực tế của nó: tạo UI nhanh – đẹp – linh hoạt, không cần viết CSS thủ công.

---

Cấu trúc form cần tạo

Form gồm 4 phần chính:

1. Tiêu đề và mô tả
2. Các trường: Họ tên, Email, Nội dung
3. Checkbox đồng ý điều khoản
4. Nút gửi

Giao diện cần:

• Bo góc nhẹ, đổ bóng
• Hiệu ứng khi nhập
• Phù hợp trên cả desktop và mobile

---

Giao diện hoàn chỉnh (code mẫu)

📋 Copy<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <form class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 shadow-lg rounded-lg p-6 w-full max-w-lg space-y-6">
    <div>
      <h2 class="text-2xl font-semibold">Liên hệ với chúng tôi</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Chúng tôi sẽ phản hồi sớm nhất có thể.</p>
    </div>

    <div>
      <label class="block mb-1 text-sm font-medium">Họ và tên</label>
      <input type="text"
             placeholder="Nguyễn Văn A"
             class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded 
                    bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 transition" />
    </div>

    <div>
      <label class="block mb-1 text-sm font-medium">Email</label>
      <input type="email"
             placeholder="email@example.com"
             class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded 
                    bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 transition" />
    </div>

    <div>
      <label class="block mb-1 text-sm font-medium">Nội dung</label>
      <textarea rows="4"
                placeholder="Nhập nội dung liên hệ..."
                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded 
                       bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"></textarea>
    </div>

    <div class="flex items-start">
      <input type="checkbox" id="agree"
             class="mt-1 mr-2 text-blue-600 bg-gray-100 dark:bg-gray-800 focus:ring-blue-500 rounded" />
      <label for="agree" class="text-sm">Tôi đồng ý với <a href="#" class="text-blue-600 hover:underline">chính sách bảo mật</a>.</label>
    </div>

    <button type="submit"
            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded transition duration-200">
      Gửi liên hệ
    </button>
  </form>
</div>

---

Phân tích nhanh

• Responsive: Dùng max-w-lg và w-full, bố trí bằng flex + p-4
• Dark mode: Kết hợp dark:bg-*, dark:text-*
• Hiệu ứng: Có hover, focus:ring, transition
• Dễ đọc: Dùng space-y-6, khoảng cách hợp lý

Tất cả class đều ngắn, rõ, dễ tùy chỉnh, không cần thêm file CSS riêng.

---

Mẹo mở rộng nếu muốn chuyên nghiệp hơn

• Dùng component cho từng trường (nếu dùng framework như React, Vue)
• Gửi dữ liệu qua Ajax thay vì reload
• Thêm disabled sau khi gửi thành công
• Kết hợp plugin @tailwindcss/forms để style form mặc định tốt hơn

---

Tổng kết kiến thức

Kỹ năng áp dụng	Class Tailwind sử dụng
Layout responsive	flex, max-w-*, w-full, space-y-*
Dark mode	dark:bg-*, dark:text-*
Hiệu ứng focus, hover	focus:ring-*, hover:bg-*, transition
Kiểm tra trạng thái checkbox	focus:ring, rounded, text-blue-600

---

Tóm tắt bài học

• Bạn đã áp dụng gần như toàn bộ kỹ năng từ đầu khóa vào một form liên hệ thực tế.
• Form vừa đẹp, vừa responsive, vừa thân thiện với dark mode – chỉ bằng Tailwind.
• Đây là ví dụ điển hình cho sức mạnh của hệ thống class tiện ích khi được dùng đúng cách.

---

Bài cuối cùng

Bạn đã đi qua hành trình 29 bài – giờ là lúc chúng ta:

• Ôn tập toàn bộ kiến thức
• Làm bài kiểm tra thực hành tổng kết
• Chuẩn bị tư duy sẵn sàng bước sang framework hoặc build project thật

Trong bài 30, bạn sẽ có:

• Bảng tổng hợp toàn bộ class theo chủ đề
• Bài tập mini-project gợi ý (landing page, blog, form…)
• Tư vấn lộ trình học tiếp: React, Next.js, hoặc chuyển sang SCSS?

---

Hẹn bạn trong bài 30: Tổng kết khóa học Tailwind CSS + Bài tập thực hành cuối khóa.
Một hành trình gần hoàn tất – nhưng lại là khởi đầu cho những dự án thật đầu tiên của bạn!