3. Membuat Halaman login

1. Struktur Dasar HTML

Dokumen ini diawali dengan elemen-elemen dasar HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This Is TL</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>

- <meta charset>: Menentukan karakter encoding dokumen.
- <meta viewport>: Membuat halaman responsif di perangkat yang lebih kecil.
- <link>: Menghubungkan file CSS eksternal.

2. Styling Body dengan Tailwind

<body class="bg-gray-400">

- bg-gray-400: Memberikan latar belakang abu-abu pada halaman.

3. Layout dengan Flexbox

<div class="h-screen w-full flex">

- h-screen: Tinggi elemen mencakup seluruh layar.
- w-full: Lebar elemen penuh layar.
- flex: Menggunakan Flexbox untuk tata letak fleksibel.

<div class="bg-white w-1/2 flex flex-col justify-center items-center">

- bg-white: Memberikan latar belakang putih.
- w-1/2: Mengatur lebar kontainer menjadi setengah layar.
- flex flex-col: Mengatur elemen dalam kontainer menjadi kolom.
- justify-center items-center: Memposisikan elemen di tengah secara horizontal dan vertikal.

<h1 class="text-4xl font-bold">Login Page</h1>
<p class="mt-3 text-xl text-gray-400">wellcome back to my website</p>

- text-4xl: Ukuran teks besar.
- font-bold: Teks tebal.
- text-gray-400: Warna teks abu-abu terang.

6. Form Input

Username Input

<div class="flex flex-col gap-4 w-full">
    <label for="username" class="text-xl">Username:</label>
    <input type="text" id="username" name="username" placeholder="Input Username" required 
        class="text-xl p-2 border-gray-200 border-2 rounded-xl focus:outline-none focus:ring focus:ring-slate-400 transition duration-200 shadow-sm">
</div>

- gap-4: Spasi antar elemen.
- placeholder: Memberikan teks petunjuk di dalam input.
- focus:outline-none focus:ring: Memberikan efek fokus saat input di-klik.

Password Input

Struktur mirip dengan input username, hanya berbeda pada type dan id:

<input type="password" id="Password" name="Password" placeholder="Input Password" required ... >

7. Opsi Tambahan (Remember Me dan Lupa Password)

<div class="flex justify-between">
    <div class="flex gap-1">
        <input type="checkbox" name="remember" id="remember" class="accent-slate-400">
        <label for="remember" class="text-lg">Remember Me</label>
    </div>
    <a href="#" class="text-lg text-blue-500">Forgot Password ?</a>
</div>

- accent-slate-400: Warna untuk checkbox.
- text-blue-500: Warna teks biru untuk tautan.

8. Tombol Submit

<button class="w-full rounded-md p-3 bg-slate-400 text-xl font-bold hover:ring hover:ring-slate-200 transition duration-200 shadow-sm">
    Submit
</button>

- hover:ring: Efek saat tombol di-hover.
- transition duration-200: Animasi halus selama 200ms.

9. Hasil Akhir

Kode HTML ini menghasilkan halaman login dengan desain responsif dan modern menggunakan Tailwind CSS. Anda dapat menyesuaikan warna, ukuran teks, dan elemen lainnya sesuai kebutuhan proyek Anda.