Challenge Praktek Slicing Tailwind CSS Tanpa Takut Salah (Best Practice)

Daftar Isi

• Pendahuluan
• Download Desain di Shaynakit
• Download Source Code di Shaynakit (Disarankan Download Ketika Sudah Membaca/Praktek Semua Isi Artikelnya)
• Baca Desain Dulu
  • Warna
  • Gambar
  • Icon
  • Pola
  • Logika Aksi
  • Pindah Halaman
  • Judul
  • Bagian-Bagian
• Pemanasan
  • Install Tailwind CSS
  • Import Tailwind in your CSS
  • Start using Tailwind in your HTML
  • Start the Tailwind CLI build process
• Menerapkan
  • Set Up Desain Mobile
  • Topics
  • Most Popular
• Page Selanjutnya
• Penutup

Pendahuluan

Kadang kamu suka mikir “Sudah/Mau praktek Tailwind CSS ah, sudah bisa sih gitu-gitu aja, tapi apa emang bener? masak sih enggak ada aturan yang bikin Tailwind CSS ini Sesuai di Kerjaan? ”Di latihan ini, kita gak mulai dari nol, desainnya udah ada, tinggal gimana caranya kamu “tantang” desain itu jadi halaman web beneran pakai Tailwind CSS.

Anggap aja kayak lagi dapet puzzle yang gambarnya udah kelihatan di kotaknya. Tantangannya tinggal tantang dirimu nyusun potongan-potongan kecilnya (HTML + Tailwind class) biar pas dan hasil akhirnya mirip sama gambar aslinya. Tenang hasil benernya tetep saya kasih tau.

Tujuan dari latihan ini adalah biar menantang kamu makin terbiasa slicing dari desain ke kode, memahami struktur layout, warna, hingga spacing, dan nerapin semuanya dengan utilitas Tailwind yang cepat dan efisien. Gak cuma teori, tapi langsung praktik biar skill-nya nempel. Siap? Yuk kita mulai nyusun puzzlenya! 🧩💻✨

Download Desain di Shaynakit

Untuk mulai melakukan challenge desain Bookies Read Digital Book App, Kamu perlu mengunduh file desain Figma-nya terlebih dahulu. Desain ini tersedia secara gratis dalam mode Free Trial melalui situs ShaynaKit. Berikut adalah langkah-langkah lengkapnya:

1. Buka situs utama ShaynaKit di https://shaynakit.com/landing.
2. Klik menu atau tombol Register atau langsung buka https://shaynakit.com/register untuk membuat akun terlebih dahulu.
3. Setelah berhasil mendaftar dan login, buka halaman desain yang akan digunakan di https://shaynakit.com/details/bookies-read-digital-book-app.
4. Klik tombol Download, lalu pada opsi yang tersedia, pilih Free Trial.
5. Klik tombol Start Today untuk memulai akses gratis.
6. Setelah itu, kembali ke halaman yang sama: https://shaynakit.com/details/bookies-read-digital-book-app, dan klik tombol Download sekali lagi.
7. File desain akan terunduh dalam format .fig, yaitu format asli file Figma.
8. Simpan file .fig tersebut ke dalam folder lokal proyek Anda, misalnya ./figma/BookiesReadDigitalBookApp.fig.

Download Source Code di Shaynakit (Disarankan Download Ketika Sudah Membaca/Praktek Semua Isi Artikelnya)

Jadi Shaynakit udah nyiapin source code desainnya buat kita. Isinya macem-macem, ada icon, gambar, pokoknya semua yang kita butuhin buat ngebangun halaman nanti. Tapi nih ya, saran aku: lewatkan dulu bagian ini. Santai dulu, baca aja dulu semua artikelnya sampai beres biar gak kehilangan rasa challenge nya. Ibaratnya kayak dapet bahan masakan lengkap dari chef, tapi sebelum mulai masak, mending kita baca dulu resepnya sampai akhir biar gak asal campur dan hasilnya tetep enak pas disajiin. 😄

Kalau udah paham alurnya, baru deh balik lagi ke sini buat download source-nya. Nah, sekarang kita liat dulu gimana caranya ngedownload file-nya, jadi kayak gini caranya cukup ikutin langkah-langkah ini:

1. Buka situs utamanya di sini: https://shaynakit.com/landing.
2. Klik menu Register atau langsung aja meluncur ke https://shaynakit.com/register buat daftar akun dulu.
3. Setelah berhasil daftar dan login, buka halaman template yang mau dipakai di sini: https://shaynakit.com/details/bookies-read-digital-html-tailwind-css-template.
4. Klik tombol Download, lalu pilih opsi Free Trial.
5. Lanjut klik Start Today buat mulai akses gratisnya.
6. Setelah itu, balik lagi ke halaman template tadi dan klik tombol Download sekali lagi.
7. File-nya bakal langsung keunduh dalam format .zip.
8. Simpan file .zip itu ke folder lokal kamu, misalnya ke: ./source-code/Bookies.zip.

Baca Desain Dulu

Nah, setelah mendownload desain yang ada di Shaynakit, selanjutnya kita bakal nyoba baca desainnya, yaitu dimulai dari hal-hal dasar yang sering disepelekan tapi penting banget, kayak:

Warna

• Grey Light (#F6F8FA)

Warna yang satu ini dipakai buat background card. Kelihatannya sepele, tapi sebenarnya penting banget karena sering muncul juga di bagian-bagian lain desainnya. Jadi pas baca desain, jangan skip bagian ini ya, perhatiin bener-bener. Yuk, langsung kita lihat gambar di bawah ini:

• Hover Grey Light (#eaeef2)

Warna yang ini emang nggak ada di desain aslinya, karena aku tambahin sendiri biar ada interaksi yang lebih hidup pas card-nya di-hover. Coba bayangin deh, waktu kursor nge-hover ke card terus background-nya berubah, otomatis kita bakal ngerasa, “Eh, ini bisa diklik nih!” Nah, efek-efek kecil kayak gini tuh ngaruh banget ke pengalaman pengguna. Dan karena warna ini frekuensi penggunaannya mirip kayak warna utama di atas, kita juga harus anggap ini penting. Jadi nanti, pas hover, background-nya bakal kayak gini:

• Grey(#90909E)

Nah, kalau yang ini juga sama, sering banget dipakai di berbagai elemen. Jadi, pas baca desain, kita harus anggap ini penting juga. Jangan sampai kelewat, karena warna ini bantu ngejaga konsistensi dan nuansa keseluruhan desain. Warna kayak warna teks ini:

• Black(#35325E)

Warna yang ini juga sama, sering banget kepake. Contohnya, bisa kamu lihat di teks yang tulisannya “Topics”. Karena sering muncul di halaman halaman, kita perlu perhatiin juga pas baca desainnya, biar nanti pas ngoding lebih gampang.

• Button Purple(#57549E)

Warna ungu yang satu ini dipakai buat tombol. Nah, biasanya nih, warna tombol itu bakal konsisten dipakai di semua halaman yang punya tombol juga. Jadi penting banget buat diinget! Hal-hal kayak gini jangan disepelein, karena warna tombol itu ngaruh ke identitas dan interaksi di seluruh halaman. Jadi pastiin kamu catat warna ini sebagai salah satu warna utama yang harus diingat pas baca desain kayak gini:

• Border Grey(#E9E8ED)

Warna Grey ini dipakai buat bagian cincin di tombol love, yang bikin tombolnya kelihatan punya outline atau border gitu. Nah, warna ini sering banget dipake juga buat tombol-tombol yang isinya cuma icon, kayak gambar di bawah ini kalau pagenya membesar atau kamu tambahin biar menjadikan brand website kamu yang konsisten. Karena sering muncul di elemen kecil tapi penting, kita juga harus anggap warna ini penting pas baca desain. Jangan sampai kelewat ya!

Gambar

Nah, kalau urusan gambar sih simpel aja. Intinya, kalau dia bukan icon, ya berarti itu gambar. Sesimpel itu. 😄 Contohnya nih, yang kayak gini yang disebut gambar:

Icon

Sekarang lanjut ke icon. Kalau icon itu identik sama yang kecil-kecil, bentuknya unik-unik, dan biasanya dipakai buat bantuin komunikasi visual, kayak nunjukin aksi atau makna tertentu. Ya semacam logo love, panah, bintang, setting, dan teman-temannya gitu lah. 😄 Biasanya juga ukurannya kecil, tapi perannya gede banget buat ngarahin atau ngasih kesan interaktif ke user kayak ini:

Pola

Selanjutnya kita bahas pola nih, ini juga penting banget buat kamu perhatiin. Kalau aku sih, pola ini kayak trik rahasia supaya kode kamu nanti jadi gampang dibaca dan rapi dari awal. Misalnya nih, kamu punya banyak card yang jarak antar card-nya sama rata. Nah, kalau kamu perhatiin pola ini dari awal, pas nanti pakai Tailwind CSS, tinggal kasih utility kayak flex sama gap-[…], beres deh! Jarak antar card langsung rapi dan konsisten tanpa ribet. Ini gak cuma bikin hidup kamu lebih gampang, tapi juga bikin kolaborasi sama tim jadi mulus karena kode kamu jadi lebih terstruktur dan “advance”. Kalau kamu baca di desain, ini yang termasuk pola:

Logika Aksi

Nah, untuk bagian ini, kita juga harus jeli baca desain dan mulai mikir, “Ini kira-kira butuh JavaScript atau enggak ya buat interaksinya?” Biar dari awal kita jelas, mana yang harus pakai JS dan mana yang cukup pakai Tailwind CSS doang. Nah, di bawah ini contohnya: Gambar pertama itu JS-nya dipakai buat bikin scroll horizontal yang mulus banget, jadi pengguna bisa geser-geser dengan nyaman. Kalau gambar kedua, JS-nya dipakai supaya pas diklik, isi warnanya di icon love-nya berubah, jadi keliatan interaktif dan responsif. Jadi, bagian-bagian kayak gini wajib kita perhatiin biar kode kita nggak asal comot tapi memang pas dan tepat fungsi.

Pindah Halaman

Nah, untuk yang ini, kita juga harus peka pas baca desain “Mana sih elemen yang bisa bikin kita pindah halaman kalau diklik?” Ini penting banget, soalnya nanti tag HTML-nya beda, gak cuma section atau div biasa, tapi harus pakai tag <a>. Tag <a> ini fungsinya buat link, alias buat pindah halaman. Jadi, kalau ada elemen yang fungsinya bawa kita ke halaman lain, wajib pakai ini. Nah, contoh elemen yang biasanya dipakai buat pindah halaman bisa kamu lihat di gambar bawah ini:

Judul

Nah, yang ini juga penting kita perhatiin, yaitu mana yang judul, dan mana yang deskripsi. Intinya sih, selain judul, pasti deskripsi yang menjelasin lebih detail. Nanti pas ngoding, kita bakal pakai tag <h> buat judul, dan tag <p> buat paragraf atau deskripsi. Dengan baca desain dari awal kayak gini, kode kita jadi lebih semantic dan pastinya juga ramah buat SEO. Jadi, selain enak buat developer, juga bikin website kita lebih gampang ditemukan di mesin pencari. Contohnya judul kayak ini semua:

Bagian-Bagian

Nah, ini juga penting banget buat kita perhatiin di desain, karena ini nunjukin bagian-bagian apa aja yang ada di satu halaman. Setiap bagian nanti kita bungkus pakai tag <section>. Tujuannya simpel: biar kodenya lebih mudah dibaca, lebih semantic, dan pastinya lebih SEO-friendly juga. Jadi, selain rapi, struktur halaman kita juga jadi jelas dan gampang dipahami baik oleh developer maupun mesin pencari. Mantap kan.

• Topics

Di halaman pertama, ternyata ini bisa dibilang sebagai satu bagian yang utuh, karena terdiri dari satu judul utama yang paling menonjol jadi bakal kita bungkus pake section, kayak gini nih:

• Most Popular

Terus, lanjut ke bagian Most Popular juga, karena posisinya setara sama bagian Topics. Jadi dua-duanya kita anggap sebagai bagian penting yang terpisah dalam halaman ini.

Pemanasan

Sekarang kita mulai masuk ke tahap ngoding nih. Tapi sebelum langsung tancap gas, kita pemanasan dulu ya, kayak stretching sebelum lari. Di sini kita bakal download dulu kebutuhan dasar buat ngoding pake Tailwind CSS. Ibaratnya, ini tuh kayak nyiapin kompor dan alat masak sebelum mulai masak. Jadi, langkah-langkah awalnya kira-kira kayak gini nih:

Install Tailwind CSS

Jalankan kode ini

npm install tailwindcss @tailwindcss/cli

Perintah npm install tailwindcss @tailwindcss/cli ini buat install Tailwind CSS sama tool CLI-nya di proyek kamu. Jadi, Tailwind CSS itu framework yang bikin styling lebih gampang pakai kelas-kelas siap pakai, terus CLI-nya yang ngebantu nge-compile file CSS biar siap dipakai di web. Intinya, ini langkah pertama supaya kamu bisa mulai ngoding pake Tailwind dengan lancar dan simpel.

Import Tailwind in your CSS

Lanjutin ini

src/input.css

@import "tailwindcss";

Kalau @import "tailwindcss"; ini fungsinya buat masukin semua style bawaan Tailwind ke file CSS kamu. Jadi nanti kamu bisa langsung pakai semua utility class yang disediain Tailwind tanpa harus nulis CSS dari nol. Simple banget, tinggal panggil ini di file utama CSS kamu, terus tinggal mulai styling!

Start using Tailwind in your HTML

lanjutin ini

src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-2xl font-extrabold">
    BuildWithAngga
  </h1>
</body>
</html>

Disini Tailwind udah siap pakai.

Start the Tailwind CLI build process

Lanjutin ini

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

ini buat ngejalanin Tailwind CLI supaya dia ngubah file CSS kamu yang ada di input.css jadi file siap pakai di output.css. Kalau ada perubahan di input.css, karena ada --watch, proses kompilasi bakal jalan terus-menerus otomatis tanpa kamu harus jalanin perintah lagi. Jadi kamu bisa langsung lihat perubahan di browser waktu kamu ngoding.

Menerapkan

Kalau Tailwind CSS-nya udah beres kita setup, sekarang saatnya kita masuk ke bagian seru, nerapin desain ke dalam kode. Ibaratnya, alat tempur udah siap, sekarang kita mulai ngerakit satu per satu elemennya sesuai blueprint. Yuk, mari kita gas pelan-pelan tapi pasti! 💻🔥

Set Up Desain Mobile

• Kode Saya

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="theme-color" content="#1B4DFF" />

        <!-- Favicon -->
        <link rel="icon" href="./assets/images/logos/company.svg" />
        <link rel="apple-touch-icon" href="./assets/images/logos/company.svg" />

        <!-- Preload key resources -->
        <link rel="preconnect" href="<https://fonts.googleapis.com>" />
        <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
        <link rel="preconnect" href="<https://cdn.jsdelivr.net>" crossorigin />

        <!-- Stylesheets -->
        <link href="./output.css" rel="stylesheet" />
        <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" />
        <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" />
        <title>Bookies | Home</title>
    </head>
    <body>
        <main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[40px] pb-[43px] flex flex-col gap-[30px] bg-white">
        </main>
        <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script>
        <script src="./js/swiper.js"></script>
    </body>
</html>

Alasannya yaitu :

Bagian <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" /> berfungsi untuk memuat font Poppins dari Google Fonts dengan berbagai tingkat ketebalan, supaya tampilan teks di halaman lebih keren dan konsisten; link stylesheet Swiper di <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> buat styling slider agar tampilannya rapi dan fungsional; sedangkan <title>Bookies | Home</title> adalah judul halaman yang muncul di tab browser. Di bagian <main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[40px] pb-[43px] flex flex-col gap-[30px] bg-white"> ini adalah wadah utama halaman dengan styling layout responsif dan rapi untuk versi mobile, jadi versi mobile itu max 640px, lalu di bawah ada dua script yaitu Swiper JS dari CDN yaitu <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> dan file lokal swiper.js yang berisi konfigurasi slider agar interaktif.

@import "tailwindcss";
body {
    font-family: "Poppins";
    background-color: #DAE1E9;
}

@theme {
    --color-bookies-grey-light: #F6F8FA;
    --color-bookies-hover-grey-light: #eaeef2;
    --color-bookies-grey: #90909E;
    --color-bookies-black: #35325E;
    --color-bookies-button-purple: #57549E;
    --color-bookies-border-grey: #E9E8ED;
}

Alasannya yaitu :

Di bagian ini saya bikin konfigurasi awal buat warna dan font biar bisa dipakai konsisten di seluruh halaman. Nah, untuk tema warna itu saya ambil dari yang kita perhatiin di desain, semua warna penting yang perlu diingat saya tulis lengkap di sini supaya gampang pas dipakai atau nanti kalau mau diubah-ubah juga nggak ribet. Jadi intinya, ini jadi semacam “bank warna dan font” yang bikin styling lebih teratur dan efisien.

• Coba Kamu

Coba dulu jangan langsung lihat kode saya, coba bikin sendiri dulu buat latihan challenge-nya. Kalau kamu udah mentok atau merasa udah kelar, baru deh intip kode saya. Dengan cara ini, kamu bisa tahu seberapa jago skill slicing kamu, plus tekanan dari challenge-nya bakal bikin pemahaman Tailwind CSS kamu makin naik level.

Topics

• Kode Saya

<section id="Topics" class="relative flex flex-col gap-3">
    <h2 class="text-xl leading-[30px] text-bookies-black font-medium px-6">Topics</h2>
    <div class="Swiper w-full overflow-x-hidden">
        <div class="swiper-wrapper py-[3px] ">
            <div class="swiper-slide !w-fit">
                <a href="details.html">
                    <div class="flex flex-col gap-[35px] w-[138px] p-[18px] rounded-[25px] bg-[#8EC9F5] hover:ring-2 hover:ring-offset-1 hover:ring-[#80b2d9] transition-all duration-300">
                        <div class="rounded-full p-[11px] shrink-0 bg-[#C5E5FF] w-fit">
                            <img src="assets/images/icons/award.svg" alt="icon" class="size-6 shrink-0">
                        </div>
                        <div class="flex flex-col gap-[6px]">
                            <h3 class="line-clamp-2 hover:line-clamp-none font-medium text-sm leading-[21px] text-bookies-black">My Self Improvement</h3>
                            <p class="text-[10px] leading-[15px] text-[#3C6A8C]">84 books</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide !w-fit">
                <a href="details.html">
                    <div class="flex flex-col gap-[35px] w-[138px] p-[18px] rounded-[25px] bg-[#ADAEFF] hover:ring-2 hover:ring-offset-1 hover:ring-[#9b9de6] transition-all duration-300">
                        <div class="rounded-full p-[11px] shrink-0 bg-[#D8D8FF] w-fit">
                            <img src="assets/images/icons/trending-up.svg" alt="icon" class="size-6 shrink-0">
                        </div>
                        <div class="flex flex-col gap-[6px]">
                            <h3 class="line-clamp-2 hover:line-clamp-none font-medium text-sm leading-[21px] text-bookies-black">Business Education</h3>
                            <p class="text-[10px] leading-[15px] text-[#3C6A8C]">12 books</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide !w-fit">
                <a href="details.html">
                    <div class="flex flex-col gap-[35px] w-[138px] p-[18px] rounded-[25px] bg-[#FDEBEA] hover:ring-2 hover:ring-offset-1 hover:ring-[#e3d4d2] transition-all duration-300">
                        <div class="rounded-full p-[11px] shrink-0 bg-[#FFF8F8] w-fit">
                            <img src="assets/images/icons/star.svg" alt="icon" class="size-6 shrink-0">
                        </div>
                        <div class="flex flex-col gap-[6px]">
                            <h3 class="line-clamp-2 hover:line-clamp-none font-medium text-sm leading-[21px] text-bookies-black">Non-Fiction Stories</h3>
                            <p class="text-[10px] leading-[15px] text-[#3C6A8C]">5 books</p>
                        </div>
                    </div>
                </a>
            </div>
            
        </div>
    </div>
</section>

Alasannya yaitu :

Saya pakai <section> karena saya yakin ini adalah bagian yang bisa berdiri sendiri, dan supaya gampang dikenali, saya kasih ID yang konsisten dan jelas. Untuk kelas swiper, itu memang bawaan dari Swiper JS, jadi saya pilih cara simpel pakai class bawaan itu supaya lebih mudah. Kalau kamu punya cara lain, silakan aja, nggak masalah. Struktur tagnya juga saya jaga rapi dan konsisten, misalnya semua judul saya pakai <h3>, terus yang bisa klik dan pindah halaman saya kasih tag <a>, paragraf saya tempatkan di <p>, dan icon saya beri kelas shrink-0 supaya ukurannya tetap pas dan nggak berantakan saat layar hape diperkecil.

js/swiper.js

var categoriesSwiper = new Swiper(".Swiper", {
    slidesPerView: "auto",
    spaceBetween: 16,
    slidesOffsetAfter: 24,
    slidesOffsetBefore: 24,
});

Alasannya yaitu :

Kalau yang ini kode JS-nya, fungsinya buat ngejalanin swiper biar slider-nya bisa swipe dengan mulus. Kalau kamu perhatiin, di kodenya itu ada pengaturan buat kasih celah kosong kiri dan kanan sebesar 24px, dan jarak antar cardnya 16px. Semua setting ini diambil dari elemen HTML yang punya class swiper, jadi nanti spacing-nya pas dan rapi sesuai desain.

• Coba Kamu

Coba dulu jangan langsung lihat kode saya, coba bikin sendiri dulu buat latihan challenge-nya. Kalau kamu udah mentok atau merasa udah kelar, baru deh intip kode saya. Dengan cara ini, kamu bisa tahu seberapa jago skill slicing kamu, plus tekanan dari challenge-nya bakal bikin pemahaman Tailwind CSS kamu makin naik level.

Most Popular

• Kode Saya

<section id="MostPopular" class="flex flex-col gap-3 px-4">
    <h2 class="text-xl leading-[30px] text-bookies-black font-medium">Most Popular</h2>
    <div class="flex flex-col gap-4">
        <a href="details.html">
            <div class="card rounded-[25px] p-4 flex items-end justify-between bg-bookies-grey-light hover:bg-bookies-hover-grey-light transition-all duration-300">
                <div class="flex items-center gap-4">
                    <div class="p-1 rounded-[13px] w-[100px] h-[130px] bg-white shrink-0">
                        <div class="flex items-center justify-center rounded-[13px] overflow-hidden">
                            <img src="assets/images/thumbnails/most-popular-1.png" alt="thumbnails" class="w-full h-full object-cover">
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <h3 class="font-medium text-bookies-black">Lamp of Brightnes Real World</h3>
                        <p class="text-sm leading-[21px] text-bookies-grey">Growth Business</p>
                    </div>
                </div>
                <button type="button" class="cursor-pointer">
                    <div class="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center">
                        <img src="assets/images/icons/love.svg" alt="icon" class="size-4">
                    </div>
                </button>
            </div>
        </a>
        <a href="details.html">
            <div class="card rounded-[25px] p-4 flex items-end justify-between bg-bookies-grey-light hover:bg-bookies-hover-grey-light transition-all duration-300">
                <div class="flex items-center gap-4">
                    <div class="p-1 rounded-[13px] w-[100px] h-[130px] bg-white shrink-0">
                        <div class="flex items-center justify-center rounded-[13px] overflow-hidden">
                            <img src="assets/images/thumbnails/most-popular-2.png" alt="thumbnails" class="w-full h-full object-cover">
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <h3 class="font-medium text-bookies-black">Art of Gathering Do Meeting</h3>
                        <p class="text-sm leading-[21px] text-bookies-grey">Team Product</p>
                    </div>
                </div>
                <button type="button" class="cursor-pointer">
                    <div class="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center">
                        <img src="assets/images/icons/love.svg" alt="icon" class="size-4">
                    </div>
                </button>
            </div>
        </a>
        <a href="details.html">
            <div class="card rounded-[25px] p-4 flex items-end justify-between bg-bookies-grey-light hover:bg-bookies-hover-grey-light transition-all duration-300">
                <div class="flex items-center gap-4">
                    <div class="p-1 rounded-[13px] w-[100px] h-[130px] bg-white shrink-0">
                        <div class="flex items-center justify-center rounded-[13px] overflow-hidden">
                            <img src="assets/images/thumbnails/most-popular-3.png" alt="thumbnails" class="w-full h-full object-cover">
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <h3 class="font-medium text-bookies-black">Tiger In The Garden For Eating</h3>
                        <p class="text-sm leading-[21px] text-bookies-grey">Children Story</p>
                    </div>
                </div>
                <button type="button" class="cursor-pointer">
                    <div class="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center">
                        <img src="assets/images/icons/love.svg" alt="icon" class="size-4">
                    </div>
                </button>
            </div>
        </a>
    </div>
</section>

Alasannya yaitu :

Yang ini juga sama, aku coba terapkan judulnya pakai tag yang tepat biar semantik dan gampang dipahami, terus tombol lovenya aku kasih tag button karena dia ada logika interaksi, jadi memang pas pakai button. Di situ juga aku pakai h2 buat judul utama dan h3 buat sub judulnya. Nah, karena card ini bisa diklik buat pindah ke halaman detail, aku bungkus semuanya pakai tag a supaya fungsinya sebagai link jelas dan sesuai standar.

• Coba Kamu

Coba dulu jangan langsung lihat kode saya, coba bikin sendiri dulu buat latihan challenge-nya. Kalau kamu udah mentok atau merasa udah kelar, baru deh intip kode saya. Dengan cara ini, kamu bisa tahu seberapa jago skill slicing kamu, plus tekanan dari challenge-nya bakal bikin pemahaman Tailwind CSS kamu makin naik level.

Page Selanjutnya

Untuk halaman selanjutnya, giliran kamu yang ambil alih! Setelah bareng-bareng kita ngebedah desain dan ngoding bareng, sekarang aku kasih kamu challenge yang sedikit lebih naik level. Kali ini kamu bakal eksplorasi sendiri, tanpa panduan langsung dari aku.

Tapi tenang, kamu gak bener-bener sendirian kok, source code-nya udah aku siapin dan bisa kamu temuin di bab “Download Source Code di Shaynakit (Disarankan Download Ketika Sudah Membaca/Praktek Semua Isi Artikelnya)” (ingat, disarankan download-nya setelah baca/praktek semua isi artikelnya ya). Anggap aja ini kayak lepas roda bantu, udah waktunya kamu ngebut sendiri! Selamat eksplorasi, dan jangan takut buat eksperimen.

Penutup

Nah, sampai sini dulu perjalanan kita dari liat-liat desain, siapin alat tempur (alias Tailwind CSS), sampai akhirnya nyusun kode kayak nyusun lego sesuai blueprint-nya.

Anggap aja tadi kita lagi masak bareng, awalnya kita baca resep dulu (desainnya), terus belanja bahan-bahannya (install Tailwind), baru deh kita mulai masak step by step (ngoding). Dan sekarang, menunya udah jadi! 🍽️

Selanjutnya tinggal kamu eksplorasi sendiri: tambahin bumbu, kreasikan gaya, atau bahkan bikin resep (desain) versi kamu sendiri. Intinya, makin sering latihan, makin jago juga kamu nanti.

Sampai jumpa di masakan alias project berikutnya. Selamat ngoding, chef frontend! 👨‍🍳👩‍🍳✨