Proyek Nyata: Bangun Landing Page Keren dengan Tailwind CSS dari Awal (Part 13)

Rifqi An Rifqi An
•
Maret 09, 2026


Halo sobat ngoding dan pejuang piksel di seluruh nusantara! Gimana kabarnya? Semoga lagi gak pusing sama bug yang baru muncul setelah deploy, ya. Kali ini, kita kembali lagi dalam petualangan seru membangun landing page impian kita, tentunya dengan bantuan sakti mandraguna dari Tailwind CSS. Kita sudah sampai di Part 13, lho! Udah sejauh ini, berarti kita udah kayak marathoner yang bentar lagi nyentuh garis finis, tapi masih ada tanjakan terakhir yang lumayan menantang. Siap untuk bikin bagian landing page kita makin hidup dan bikin client atau user langsung jatuh cinta?

Di seri sebelumnya kita udah banyak eksplorasi, mulai dari setup awal sampai bikin section hero yang memukau. Nah, di bagian ke-13 ini, kita bakal merakit salah satu bagian paling krusial yang bisa bikin pengunjung yakin sama produk atau layanan kita: Testimonial Section. Yuk, siapkan kopi dan energi ekstra, karena kita bakal ngoding seru lagi!

Daftar Isi: Proyek Nyata: Bangun Landing Page Keren dengan Tailwind CSS dari Awal (Part 13)

Recap Singkat: Kenapa Tailwind itu Jodoh Kita?

Sebelum kita loncat ke ngoding, mungkin ada yang baru gabung atau lupa kenapa kita begitu demen sama Tailwind CSS. Singkatnya, Tailwind itu kayak punya segudang perkakas tukang yang udah siap pakai. Kita gak perlu lagi pusing mikirin nama kelas CSS yang unik biar gak conflict. Cukup panggil flex, p-4, rounded-lg, dan voila! Komponen kita langsung terbentuk. Ini bikin proses prototyping dan pengembangan jadi ngebut, seolah kita punya kekuatan super untuk bikin UI secepat kilat. Jadi, pamit sama pusingnya CSS lama, sambut kecepatan Tailwind!

Ayo Ngoding: Persiapan Dulu, Biar Gak Kaget!

Oke, asumsinya kamu sudah mengikuti bagian-bagian sebelumnya dan project Tailwind CSS kita sudah jalan dengan manis. Pastikan development server kamu udah nyala, biasanya dengan perintah:


npm run dev

Kalau udah jalan, buka file index.html (atau file HTML utama kamu) dan siap-siap kita bakal tambahin section baru. Kita akan fokus menambahkan struktur HTML dan kelas-kelas Tailwind di dalam file tersebut. Gampang, kan? Tinggal copas (tapi jangan lupa dipahami)!

Merakit Bagian Testimonial yang Bikin Client Melting

Bagian testimonial ini penting banget, ibaratnya "kata orang" yang bisa bikin calon pelanggan makin percaya. Kita bakal buat satu section yang berisi beberapa kartu testimonial. Setiap kartu akan menampilkan foto, nama, jabatan, dan kutipan. Yuk, kita mulai dengan struktur dasarnya!

1. Struktur Kontainer Utama

Pertama, kita siapkan kontainer untuk seluruh bagian testimonial. Kita kasih padding atas bawah dan margin auto biar di tengah serta max-width biar gak terlalu lebar di layar gede.


<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 max-w-5xl">
        <h2 class="text-4xl font-extrabold text-gray-900 text-center mb-12">Apa Kata Mereka?</h2>
        <!-- Nanti Kartu Testimonial ada di sini -->
    </div>
</section>

Kita pake bg-gray-50 biar ada sedikit kontras dengan bagian lain, dan text-center untuk judulnya. Mantap!

2. Menata Kartu Testimonial dengan Grid

Supaya rapi, kita bakal tata kartu-kartu testimonial ini menggunakan Grid dari Tailwind. Kita bisa atur berapa kolom yang akan muncul di layar berbeda.


<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 max-w-5xl">
        <h2 class="text-4xl font-extrabold text-gray-900 text-center mb-12">Apa Kata Mereka?</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Kartu Testimonial Pertama -->
            <!-- Kartu Testimonial Kedua -->
            <!-- Kartu Testimonial Ketiga -->
        </div>
    </div>
</section>

Perhatikan grid-cols-1 (default untuk mobile), md:grid-cols-2 (untuk tablet ke atas), dan lg:grid-cols-3 (untuk desktop). Ini yang bikin desain kita otomatis responsif!

3. Merancang Kartu Testimonial Tunggal

Nah, ini dia bagian intinya. Setiap kartu akan punya avatar, nama, jabatan, dan kutipan. Kita bakal bikin satu dulu, nanti tinggal di-copas. Ingat, gambar avatarnya nanti bisa diganti sama gambar asli ya. Jangan lupa alt tag-nya juga penting buat SEO dan aksesibilitas!


            <!-- Masih di dalam div.grid.grid-cols... -->
            <div class="bg-white p-6 rounded-lg shadow-lg text-center">
                <img class="w-20 h-20 rounded-full mx-auto mb-4 object-cover" src="https://via.placeholder.com/80" alt="Avatar User">
                <p class="text-lg font-semibold text-gray-800">"Website ini benar-benar mengubah cara saya bekerja. Antarmukanya intuitif dan sangat cepat!"</p>
                <p class="mt-4 text-gray-700 font-medium">
                    <strong>Budi Santoso</strong>
                    <br>
                    <em class="text-sm text-gray-500">CEO, PT Maju Mundur</em>
                </p>
            </div>

Perhatikan kelas-kelasnya: bg-white (latar belakang putih), p-6 (padding), rounded-lg (sudut membulat), shadow-lg (bayangan biar timbul), text-center (rata tengah). Untuk avatar, kita kasih w-20 h-20 (lebar dan tinggi 80px), rounded-full (biar bulet sempurna), dan mx-auto (margin auto horizontal) biar di tengah. Keren, kan?

4. Menyelesaikan dengan Beberapa Testimonial

Sekarang, tinggal copas blok kartu testimonial tadi sebanyak yang kamu mau. Misalnya, kita bikin tiga atau enam kartu biar kelihatan ramai.


<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 max-w-5xl">
        <h2 class="text-4xl font-extrabold text-gray-900 text-center mb-12">Apa Kata Mereka?</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- Testimonial 1 -->
            <div class="bg-white p-6 rounded-lg shadow-lg text-center">
                <img class="w-20 h-20 rounded-full mx-auto mb-4 object-cover" src="https://via.placeholder.com/80" alt="Avatar Budi Santoso">
                <p class="text-lg font-semibold text-gray-800">"Website ini benar-benar mengubah cara saya bekerja. Antarmukanya intuitif dan sangat cepat!"</p>
                <p class="mt-4 text-gray-700 font-medium">
                    <strong>Budi Santoso</strong>
                    <br>
                    <em class="text-sm text-gray-500">CEO, PT Maju Mundur</em>
                </p>
            </div>

            <!-- Testimonial 2 -->
            <div class="bg-white p-6 rounded-lg shadow-lg text-center">
                <img class="w-20 h-20 rounded-full mx-auto mb-4 object-cover" src="https://via.placeholder.com/80" alt="Avatar Siti Aminah">
                <p class="text-lg font-semibold text-gray-800">"Dukungan pelanggannya juara! Setiap pertanyaan selalu dijawab dengan cepat dan solutif."</p>
                <p class="mt-4 text-gray-700 font-medium">
                    <strong>Siti Aminah</strong>
                    <br>
                    <em class="text-sm text-gray-500">UI/UX Designer, Kreatif Digital</em>
                </p>
            </div>

            <!-- Testimonial 3 -->
            <div class="bg-white p-6 rounded-lg shadow-lg text-center">
                <img class="w-20 h-20 rounded-full mx-auto mb-4 object-cover" src="https://via.placeholder.com/80" alt="Avatar Joko Susanto">
                <p class="text-lg font-semibold text-gray-800">"Sebagai developer, saya sangat menghargai performa dan kemudahan integrasinya. Jempol!"</p>
                <p class="mt-4 text-gray-700 font-medium">
                    <strong>Joko Susanto</strong>
                    <br>
                    <em class="text-sm text-gray-500">Lead Developer, Kode Keras</em>
                </p>
            </div>

        </div>
    </div>
</section>

Voila! Kamu sekarang punya testimonial section yang rapi dan terstruktur. Jangan lupa ganti teks dan gambar dengan yang asli ya. Atau kalau mau iseng, bisa pakai foto teman ngopi kamu biar makin semangat ngodingnya!

Sentuhan Akhir: Responsi-kan Biar HP-Friendly

Sebenarnya, dengan menggunakan grid-cols-1 md:grid-cols-2 lg:grid-cols-3 tadi, kita sudah membuat section ini responsif secara otomatis. Di layar kecil (mobile), testimonial akan tersusun satu kolom ke bawah. Lalu, di layar sedang (tablet), akan jadi dua kolom. Dan di layar besar (desktop), tiga kolom. Inilah salah satu kekuatan utama Tailwind CSS!

Tapi, kita bisa tambahkan sentuhan-sentuhan kecil lainnya. Misalnya, untuk ukuran teks. Kita bisa memastikan teks judul tetap terbaca nyaman di berbagai ukuran layar. Coba cek kelas text-4xl yang kita gunakan pada judul <h2>. Mungkin di mobile terlalu besar, jadi bisa kita adjust.


<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 text-center mb-12">Apa Kata Mereka?</h2>

Dengan text-3xl sm:text-4xl, judul akan berukuran 3xl secara default (untuk layar kecil), dan akan naik ke 4xl saat layar mencapai breakpoint sm (biasanya 640px) ke atas. Ini bikin tampilan kita makin profesional dan nyaman di mata pengguna, baik di HP kentang maupun monitor super lebar.

Ngopi Dulu, Koding Jalan Terus!

Selamat! Kamu baru saja berhasil menambahkan bagian testimonial yang interaktif dan responsif ke landing page keren kita. Gimana, gampang kan pake Tailwind? Berasa udah jadi master CSS instan, padahal cuma copas dan sedikit modifikasi. Jangan bilang siapa-siapa, ini rahasia kita aja ya!

Rasanya lega, ya, kalau satu per satu bagian landing page kita mulai terbentuk. Ini membuktikan bahwa dengan pendekatan yang tepat seperti Tailwind CSS, proses ngoding frontend itu bisa jadi asyik dan tidak bikin jidat berkerut saking pusingnya debugging CSS. Tetap semangat, Part 14 pasti akan lebih seru lagi!

Latihan buat Para Kuli Kode

Oke, sekarang giliran kamu unjuk gigi! Ceritanya begini: Bos kamu, namanya Pak Budi, tiba-tiba datang pas kamu lagi asyik ngopi di jam kerja. Dia bilang, "Eh, testimonial itu kurang 'wow' gitu! Coba tambahin bintang-bintang 5 di setiap kartu testimonial. Biar kelihatan profesional dan orang-orang makin percaya. Oh iya, warnanya kuning keemasan ya! Pokoknya harus mirip kayak review di Tokped atau Shopee!"

Tentu saja, kamu sebagai kuli kode yang profesional dan tak kenal lelah (asal ada cemilan dan kopi), langsung mengangguk. Nah, tantangannya adalah:

  • Tambahkan ikon bintang 5 di setiap kartu testimonial. Kamu bisa pakai SVG atau font icon (misalnya dari Font Awesome, tapi kalau mau murni Tailwind, coba aja bikin kotak kuning kecil).
  • Pastikan bintang-bintang itu tertata rapi di bawah kutipan dan di atas nama pengguna.
  • Gunakan kelas Tailwind CSS untuk mengatur ukuran dan warna bintang agar sesuai permintaan Pak Budi (kuning keemasan alias text-yellow-400 atau text-amber-500).
  • Bonus: Coba buat biar ada sedikit margin atau spacing antar bintangnya.

Jangan sampai Pak Budi marah, ya! Kalau sampai ada error atau bintangnya malah jadi logo partai, siap-siap aja kamu disuruh lembur seminggu tanpa gaji. Semangat!

Happy ngoding!

Bagikan Artikel Ini