Untuk membuat halaman web responsif menggunakan Tailwind CSS, kita akan menggunakan class *utility-first* yang disediakan untuk mengatur tata letak, styling teks, warna, hingga ukuran elemen sesuai dengan ukuran layar. Berikut adalah panduan langkah demi langkah untuk membuat halaman responsif sederhana.
### Contoh Struktur Halaman Responsif
Misalkan kita ingin membuat halaman web dengan:
- Header dengan navigasi.
- Hero section dengan judul dan tombol.
- Section untuk fitur.
- Footer.
Berikut adalah contoh lengkap:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web with Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="font-sans antialiased bg-gray-100 text-gray-800">
<!-- Header -->
<header class="bg-white shadow">
<div class="container mx-auto flex justify-between items-center p-4">
<a href="#" class="text-2xl font-bold text-blue-500">Logo</a>
<nav class="hidden md:flex space-x-4">
<a href="#" class="text-gray-600 hover:text-blue-500">Home</a>
<a href="#" class="text-gray-600 hover:text-blue-500">About</a>
<a href="#" class="text-gray-600 hover:text-blue-500">Services</a>
<a href="#" class="text-gray-600 hover:text-blue-500">Contact</a>
</nav>
<button class="md:hidden text-blue-500">Menu</button>
</div>
</header>
<!-- Hero Section -->
<section class="bg-blue-500 text-white text-center py-20 px-4">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold">Welcome to Our Website</h1>
<p class="mt-4 text-lg md:text-xl">Tailwind CSS is perfect for responsive design.</p>
<button class="mt-8 px-6 py-3 bg-white text-blue-500 font-semibold rounded hover:bg-gray-200 transition">Get Started</button>
</section>
<!-- Features Section -->
<section class="container mx-auto py-20 px-4">
<h2 class="text-3xl font-bold text-center mb-10">Our Features</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded shadow">
<h3 class="text-xl font-bold mb-2">Feature One</h3>
<p>Learn about our first amazing feature.</p>
</div>
<div class="bg-white p-6 rounded shadow">
<h3 class="text-xl font-bold mb-2">Feature Two</h3>
<p>Our second feature is all about efficiency.</p>
</div>
<div class="bg-white p-6 rounded shadow">
<h3 class="text-xl font-bold mb-2">Feature Three</h3>
<p>Discover the power of feature three.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-gray-200 py-10">
<div class="container mx-auto text-center">
<p>© 2024 Our Company. All rights reserved.</p>
<div class="mt-4 space-x-4">
<a href="#" class="hover:text-blue-400">Privacy Policy</a>
<a href="#" class="hover:text-blue-400">Terms of Service</a>
</div>
</div>
</footer>
</body>
</html>
```
### Penjelasan
1. **Header**:
- Menggunakan `flex` dan `justify-between` untuk menata logo dan menu.
- Navigasi hanya terlihat pada layar `md` dan lebih besar (menggunakan `hidden md:flex`).
- Tombol menu ditampilkan pada layar lebih kecil (`md:hidden`), yang berguna untuk menambahkan menu *hamburger* di layar kecil.
2. **Hero Section**:
- Menggunakan class responsif untuk ukuran teks: `text-4xl sm:text-5xl md:text-6xl`, yang berarti judul akan semakin besar di layar yang lebih besar.
- Tombol dibuat dengan warna kontras, serta tambahan *hover effect* menggunakan `hover:bg-gray-200`.
3. **Features Section**:
- Menggunakan `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3` untuk membuat kolom fitur yang berubah sesuai lebar layar. Satu kolom di layar kecil, dua kolom di layar sedang, dan tiga kolom di layar besar.
- Setiap fitur memiliki latar belakang putih, padding, sudut membulat, dan bayangan untuk menonjolkan elemen.
4. **Footer**:
- Latar belakang gelap (`bg-gray-800`) dengan teks terang (`text-gray-200`) agar kontras.
- Menggunakan `text-center` untuk merapikan konten di tengah layar.
### Responsif dengan Tailwind
Tailwind CSS membuat halaman ini responsif dengan mengatur class yang beradaptasi di berbagai ukuran layar:
- **`sm:`** untuk ukuran layar kecil ke atas (640px+).
- **`md:`** untuk ukuran sedang ke atas (768px+).
- **`lg:`** untuk ukuran besar ke atas (1024px+).
- **`xl:`** untuk ukuran ekstra besar (1280px+).
Dengan memanfaatkan kelas-kelas ini, Anda bisa mengontrol tata letak elemen sesuai kebutuhan responsif halaman.