
Daftar Isi
- Latar Belakang
- Tujuan Artikel
- Target Pembaca
- Setelah Membaca
- Download Desain
- Membuat Akun Figma
- Import ke Figma
- Membaca Desain
- Di Bagian ini Kamu Akan Bisa :
- Shortcut Keyboard
- Membaca Icon
- Membaca Gambar
- Membaca Layout
- Memulai Slicing
- Di Bagian ini Kamu Akan Bisa :
- Buka Folder Sebelumnya
- Starter
- Slicing 1
- Slicing 2
- Slicing 3
- Slicing 4
- Slicing 5
- Slicing 6
- Slicing 7
- Slicing 8
- Slicing 9
- Slicing 10
- Slicing 11
- Slicing 12
- Penutup
Latar Belakang
Dalam era pengembangan mobile-first, desain antarmuka harus dioptimalkan untuk layar kecil (maksimal 640px) dengan presisi pixel-perfect. Figma memungkinkan desainer membuat mockup mobile yang akurat, sementara Tailwind CSS menawarkan fleksibilitas untuk menerjemahkan desain tersebut ke kode yang responsif. Namun, tantangan utama muncul ketika:
- Akurasi Visual: Menyamakan setiap elemen desain (spasi, ukuran, posisi) di Figma dengan implementasi kode hingga ke level piksel, termasuk penyesuaian konfigurasi Tailwind untuk hardcoded values (misal:
w-[320px]
,gap-3.5
). - Responsivitas Terkontrol: Mempertahankan batas lebar 640px sebagai breakpoint utama sambil memastikan komponen tetap konsisten di semua perangkat mobile (misal: menggunakan
max-w-[640px] mx-auto
). - Optimasi untuk Mobile: Menghindari over-engineering dengan memanfaatkan utility class Tailwind yang sesuai untuk viewport kecil (misal: padding, font-size, grid layout).
- Interaktivitas Mobile-First: Implementasi JavaScript untuk interaksi touch-friendly (seperti klik, swipe) yang tetap presisi sesuai desain Figma.
Artikel ini menyajikan pendekatan sistematis untuk slicing desain Figma mobile-first ke kode HTML, Tailwind CSS, dan JavaScript di VSCode, dengan fokus pada ketelitian pixel-perfect dan optimasi performa mobile.
Tujuan Artikel
Artikel ini bertujuan untuk:
- Memberikan Panduan Praktis: Menunjukkan langkah demi langkah cara menerjemahkan desain Empty State Airplane dari Figma ke struktur HTML + Tailwind CSS dengan akurasi pixel-perfect.
- Mengoptimalkan untuk Mobile: Menyusun komponen dengan pendekatan mobile-first, menjaga konsistensi lebar, padding, margin, dan skala font sesuai dengan batas maksimal 640px.
- Menerapkan Tailwind CSS secara Efisien: Menggunakan utility classes Tailwind, termasuk pendekatan hardcoded values (seperti
w-[320px]
,gap-3.5
), untuk mencapai kesetiaan desain maksimal tanpa over-engineering. - Meningkatkan Presisi Visual: Menggunakan teknik inspeksi dan pengukuran langsung di Figma untuk memastikan setiap elemen (ikon, ilustrasi, teks, spasi) direplikasi secara akurat.
- Mengintegrasikan Interaktivitas Ringan: Menambahkan fungsionalitas sederhana menggunakan JavaScript berbasis sentuhan (touch-friendly interaction), tanpa mengorbankan performa untuk perangkat mobile.
Dengan mengikuti panduan ini, pembaca dapat memahami bagaimana mengubah desain Figma mobile menjadi kode nyata yang responsif, presisi, dan optimal untuk mobile device.
Target Pembaca
Artikel ini ditujukan bagi:
- Frontend Developer yang sering bekerja dengan desain Figma dan ingin meningkatkan presisi implementasi desain mobile.
- UI Engineer yang fokus pada pixel-perfect implementation dan ingin memahami praktik terbaik konversi desain ke Tailwind CSS.
- Desainer yang Belajar Coding dan ingin tahu bagaimana desain mereka diimplementasikan dalam kode dengan konsistensi visual di perangkat kecil.
- Mahasiswa / Pembelajar Web Development yang ingin menambah portofolio dengan praktik langsung slicing desain Figma mobile-first menggunakan Tailwind CSS di lingkungan kerja nyata (VSCode).
- Tim Pengembang Mobile Web yang ingin menyusun guideline konversi desain ke HTML+CSS yang efisien dan terstandarisasi.
Dengan gaya penulisan yang teknis namun aplikatif, artikel ini cocok bagi mereka yang ingin meningkatkan workflow antara desain dan kode, terutama dalam konteks proyek berbasis Tailwind CSS dan pendekatan mobile-first.
Setelah Membaca
Setelah membaca artikel ini, pembaca diharapkan mampu:
- Melakukan Slicing Desain Mobile: Mengubah desain Figma untuk layar kecil (≤640px) menjadi struktur HTML + Tailwind CSS yang pixel-perfect.
- Menggunakan Tailwind dengan Presisi: Memanfaatkan utility class bawaan dan custom value (seperti
w-[320px]
,gap-3.5
) untuk meniru ukuran dan spasi desain secara akurat. - Membangun Layout Mobile-First yang Konsisten: Membuat layout yang responsive namun tetap mempertahankan batas maksimal 640px, menggunakan prinsip mobile-first development.
- Mengoptimalkan Performa Mobile: Menulis kode HTML, CSS, dan JavaScript yang ringan, cepat dimuat, dan responsif terhadap interaksi berbasis sentuhan.
- Mengembangkan Keterampilan Inspeksi Desain: Membaca, mengukur, dan memahami elemen-elemen di Figma dengan lebih teliti untuk memastikan hasil implementasi visual 1:1.
Dengan keterampilan ini, pembaca akan lebih percaya diri dalam mengerjakan proyek-proyek berbasis mobile dan dapat mempercepat alur kerja antara desain dan pengembangan.
Download Desain

Untuk mulai melakukan slicing desain Empty State Airplane, 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:
- Buka situs utama ShaynaKit di https://shaynakit.com/landing.
- Klik menu atau tombol Register atau langsung buka https://shaynakit.com/register untuk membuat akun terlebih dahulu.
- Setelah berhasil mendaftar dan login, buka halaman desain yang akan digunakan di https://shaynakit.com/details/empty-state-airplane.
- Klik tombol Download, lalu pada opsi yang tersedia, pilih Free Trial.
- Klik tombol Start Today untuk memulai akses gratis.
- Setelah itu, kembali ke halaman yang sama: https://shaynakit.com/details/empty-state-airplane, dan klik tombol Download sekali lagi.
- File desain akan terunduh dalam format .fig, yaitu format asli file Figma.
- Simpan file
.fig
tersebut ke dalam folder lokal proyek Anda, misalnya./figma/EmptyStateAirplane.fig
.
Membuat Akun Figma

- Kunjungi Situs Figma : Buka browser lalu akses https://www.figma.com.
- Pilih “Sign up” atau “Get started for free” : Tombol ini biasanya ada di pojok kanan atas halaman utama.
- Masukkan Data Registrasi
- Email: Gunakan email aktif yang kamu miliki.
- Nama Lengkap: Nama ini akan tampil di kolaborasi.
- Password: Buat minimal 8 karakter, disarankan mencampur huruf dan angka.
- Verifikasi Email : Cek inbox email yang kamu daftarkan, klik link verifikasi dari Figma untuk mengaktifkan akun.
- Pilih Plan : Setelah verifikasi, Figma akan menawarkan beberapa plan (Free, Professional, Organization). Untuk memulai, cukup pilih Free.
- Selesai & Masuk ke Dashboards : Kamu akan diarahkan ke dashboard Figma, di mana kamu bisa membuat file baru, mengimpor file
.fig
, dan mengundang tim.
Import ke Figma

- Kunjungi Situs Figma. Buka browser lalu akses https://www.figma.com.
- Setelah masuk, kamu akan berada di tampilan utama Figma. Di sini kamu bisa melihat daftar file dan proyek sebelumnya.
- Klik tombol "Import File" (ikon ⬆️ di pojok kanan atas, atau menu
File > Import
). - Arahkan ke lokasi file
.fig
yang telah kamu simpan sebelumnya (misalnya./figma/EmptyStateAirplane.fig
). - Pilih file tersebut, lalu klik Open atau Import.
- Figma akan memproses file, dan setelah selesai, desain akan muncul sebagai proyek baru di dashboard Anda.
- Klik file tersebut untuk membukanya.
Membaca Desain
Di Bagian ini Kamu Akan Bisa :
✅ Figma Lebih Detail
✅ Sortcut Keyboard untuk Figma
✅ Membaca Icon
✅ Membaca Gambar
✅ Membaca Layout
Shortcut Keyboard
Copy Paste
Berfungsi menggandakan desain.

Cara melakukannya :
- Pilih frame, grup, atau objek yang ingin digandakan.

- Tekan Ctrl + D (Windows) atau Cmd + D (Mac).
- Figma akan langsung membuat salinan tepat di bawah/kanan aslinya. Jika ingin membuat lebih dari satu, cukup tekan lagi Ctrl + D.
Ctrl + Z
Berfungsi untuk kembali 1 langkah sebelumnya.

Cara melakukannya :
- Klik sekali di area canvas atau jendela file Figma supaya aplikasi menerima input keyboard.
- Windows/Linux: Tekan
Ctrl + Z
sekali untuk membatalkan (undo) satu perubahan terakhir. - Mac: Tekan
⌘ Cmd + Z
sekali untuk membatalkan satu perubahan terakhir.
Ctrl + Shift + Z
Berfungsi membatalkan “kembali 1 langkah sebelumnya”. Cara melakukannya :
- Klik sekali di area canvas atau jendela file Figma supaya aplikasi menerima input keyboard.
- Windows/Linux: Tekan
Ctrl + Shift + Z
untuk redo (maju kembali setelah undo). - Mac: Tekan
⌘ Cmd + Shift + Z
untuk redo (maju kembali setelah undo)
Klik 2X
Berfungsi untuk melihat size group yang kamu mau. Contoh ketika di “Deskripsi Judulnya” :
- Arahkan kursor ke group ( Title & Description ), hingga muncul garis biru seperti ini.

- Klik 2X pada “Deskripsinya”

- Perhatikan pada bilah kanan Figma terdapat konfigurasi teksnya.

- Ulangi hal tersebut pada group desain apapun yang ingin kamu mau tau.
Klik Beberapa Kali+ Hover + Alt
Berfungsi melihat jarak antar konten desain, contohnya antar “Title dengan Paragraf” seperti :

Cara melakukannya :
- Arahkan kursor di atas “Paragrafnya”.
- Klik pada Deskripsi “We give you early credit so that you can buy a flight ticket” Beberapa Kali sampai seperti ini :

- Pindahkan cursor ke Title “Big Bonus”.
- Klik Alt.
- Maka akan muncul celah di antara keduanya yaitu ( 10 ) artinya 10px, hal ini berfungsi untuk development nanti.

Import Icon Menjadi SVG
Berfungsi mengambil Icon lalu di letakkan di folder Icon VSCode lalu di tampilkan di browser. Cara Melakukannya :
- Klik beberapa kali di atas icon Figma hingga seperti ini ( 24 x 24 ) :

- Klik kanan.

- Kursor di atas “Copy/Paste as” dan klik “Copy as SVG”.

Import Image menjadi PNG
- Klik di atas image Figma hingga seperti ini ( 299.96 x 150 ) :

- Scroll ke bawah sampai seperti pada bilah kanan.

- Klik dropdown “Export” nya bertulis “1x” :

- maka muncul :

- Pilih “3x” dan klik tombol “Export Basic Interview”

Membaca Icon
Icon Yang Mana?

Di atas adalah icon. Di dalam desain Figma, icon adalah elemen grafis kecil yang biasanya digunakan untuk mewakili aksi, fitur, atau objek tertentu dengan cara yang visual dan mudah dikenali.
Di dalam desain Figma icon adalah :
- Gambar vektor kecil (SVG) atau bentuk (shapes) yang menggambarkan sesuatu, seperti 🔍 (search), ✏️ (edit), 🗑 (delete), dll.
- Sering digunakan dalam UI/UX design seperti di tombol, menu navigasi, tab, atau status indicator.
Fungsi Icon adalah :
- Hemat ruang : Ikon menggantikan teks panjang agar antarmuka tetap ringkas.
- Estetika visual : Ikon bikin desain lebih menarik dan terasa hidup.
- Bahasa universal : Ikon mudah dipahami lintas bahasa misalnya ikon globe untuk "global".
- Representasi aksi : Misal ikon gerigi = pengaturan, amplop = pesan, dll.
Cara Import?
Berfungsi mengambil Icon lalu di letakkan di folder Icon VSCode lalu di tampilkan di browser. Cara Melakukannya :
Klik beberapa kali di atas icon Figma hingga seperti ini ( 24 x 24 ) :

Klik kanan.

Kursor di atas “Copy/Paste as” dan klik “Copy as SVG”.

Buat folder proyek yaitu “Empty-State-Airplane”

Open folder tersebut di VSCode

- Buka VSCode.
- Klik File > Open Folder...
- Pilih folder project kamu, yaitu :
Empty-State-Airplane
. - Setelah folder terbuka di sidebar kiri (Explorer), kamu bisa mulai membuat folder baru.
Buat Folder src

- Klik kanan pada folder utama
Empty-State-Airplane
di sidebar kiri. - Pilih New Folder.
- Ketik nama folder:
src
, lalu tekan Enter.
Buat Folder images di dalam src

- Klik ikon
>
di sampingsrc
untuk membukanya. - Klik kanan pada folder
src
> New Folder. - Ketik nama folder:
images
, lalu tekan Enter.
Buat Folder Tambahan di Dalam images

- Klik ikon
>
di sampingimages
untuk membukanya. - Klik kanan pada folder
images
> New Folder. - Buat folder berikut satu per satu:
backgrounds
icons
Buat File airplane.svg di dalam folder icons untuk meletakkan iconnya
- Klik ikon > di samping icons untuk membukanya.
- Klik kanan pada folder icons > New File.
- Buat file bernama airplane.svg
- Klik link “Open file using VS Code’s standard text/binary editor?”

- Ctrl + V disini

- Hasil akhirnya akan seperti ini :

Membaca Gambar
Gambar Yang Mana?

Image ini berfungsi :
- Menyampaikan Konten Nyata : Gambar background memberi gambaran visual “in‑context” tentang halaman yang hendak ditampilkan ke user.
- Membuat Prototipe Lebih Hidup : Daripada tanpa background image, menggunakan background image bikin stakeholder atau user test lebih paham feel UI.
Cara Import?
Berfungsi mengambil Icon lalu di letakkan di folder Icon VSCode lalu di tampilkan di browser. Cara Melakukannya :
- Klik di atas image Figma hingga seperti ini ( 299.96 x 150 ) :

- Scroll ke bawah sampai seperti pada bilah kanan.

- Klik dropdown “Export” nya bertulis “1x” :

- maka muncul :

- Pilih “3x” dan klik tombol “Export Basic Interview”

- Letakkan ditempat yang kamu mau.
- Masuk ke proyek Empty-State-Airplane lalu masuk ke folder src/images/backgrounds.
- Drag image tersebut sampai begini.

Membaca Layout
Identifikasi Konten Desain
Link Berpindah Halaman
LInk berpindah halaman adalah bagian ketika user klik, user akan berpindah halaman satu ke halaman yang lain.

Urutan
A → B → C → dst
Terbesar → besar → kecil → makin kecil → makin kecil -> dst

Memulai Slicing
Di Bagian ini Kamu Akan Bisa :
- ✅ Slicing dari Figma ke VSCode
- ✅ Mahir Tailwind CSS
- ✅ Pixel Perfect
- ✅ Responsive max 640px
Buka Folder Sebelumnya

Starter
- Jalankan perintah di terminal.
npm install tailwindcss @tailwindcss/cli
Penjelasan:
Paket | Fungsi |
---|---|
tailwindcss | Menginstal Tailwind CSS versi terbaru (saat ini versi 4), yaitu framework utility-first CSS. |
@tailwindcss/cli | Menginstal CLI resmi dari Tailwind untuk membangun file CSS langsung dari terminal (tanpa perlu setup tambahan seperti PostCSS atau Webpack). |
- Pada side bar VSCode di dalam folder src bikin file bernama input.css .
- Letakkan ini
/* src/input.css */
@import "tailwindcss";
- Lalu pada
// package.json
{
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"tailwindcss": "^4.1.4"
}
}
- Beri kode seperti ini:
// package.json
{
"scripts": {
"dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
},
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"tailwindcss": "^4.1.4"
}
}
Penjelasan:
Bagian | Penjelasan |
---|---|
"scripts" | Merupakan bagian dari package.json yang berisi perintah-perintah (alias) yang bisa kamu jalankan dengan npm run atau yarn . |
"dev" | Nama alias dari script ini. Kamu bisa menjalankannya dengan perintah npm run dev . |
"npx @tailwindcss/cli" | Menjalankan CLI Tailwind secara langsung tanpa perlu instal global. |
-i ./src/input.css | Mengatur file input CSS. File ini harus berisi direktif seperti @tailwind base; , @tailwind components; , dan @tailwind utilities; tetapi tailwind 4 telah menuliskannya secara implisit. |
-o ./src/output.css | Mengatur file output CSS yang akan dihasilkan oleh Tailwind (berisi semua utility class Tailwind yang digunakan di project). |
--watch | Mengaktifkan mode pemantauan. Tailwind akan terus memantau perubahan pada file HTML/JS/CSS yang kamu atur dan memperbarui output.css setiap kali ada perubahan. |
- Buat file index.html di src/ .
- Letakkan html dasar di dalamnya.
<!-- 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-semibold">
Hello world!
</h1>
</body>
</html>
Penjelasan:
Baris HTML | Penjelasan |
---|---|
<!doctype html> | Mendeklarasikan bahwa dokumen ini adalah dokumen HTML5. Wajib di bagian paling atas. |
<html> | Elemen root dari seluruh dokumen HTML. Semua elemen HTML berada di dalam tag ini. |
<head> | Bagian yang berisi informasi meta (bukan tampilan), seperti encoding, viewport, stylesheet, dll. |
<meta charset="UTF-8"> | Menentukan karakter encoding sebagai UTF-8, sehingga bisa menampilkan karakter dari berbagai bahasa dengan benar. |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | Mengatur agar layout responsive di perangkat mobile dengan menyesuaikan lebar viewport. |
<link href="./output.css" rel="stylesheet"> | Menyertakan file CSS (output.css ) yang dihasilkan oleh Tailwind agar dapat digunakan di HTML. |
<body> | Bagian utama halaman yang berisi konten yang ditampilkan di browser. |
<h1 class="text-2xl font-semibold"> | Heading tingkat 1. Class text-2xl dan font-semibold dari Tailwind digunakan untuk mengatur ukuran dan ketebalan font. |
Hello world! | Isi teks yang ditampilkan di halaman. |
</body> dan </html> | Menutup elemen body dan html . |
- Tambahkan font Poppins pada tag head html nya
<!-- src/index.html -->
<link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" />
Lalu tambahkan konfigurasi body seperti ini
/* src/input.css */
body {
font-family: "Poppins";
background-color: #DAE1E9;
}
Penjelasan:
Utility CSS | Nilai | Penjelasan |
---|---|---|
font-family | "Poppins" | Mengatur jenis huruf utama pada elemen <body> menjadi Poppins. |
background-color | #DAE1E9 | Memberikan warna latar belakang pada elemen <body> dengan warna abu kebiruan terang (kode hex #DAE1E9 ). |
- Definisikan warna yang di pakai dalam desain seperti berikut di dalam input.css.
/* src/input.css */
@theme {
--color-empty-bg: #FAFAFA;
--color-empty-black: #1F1449;
--color-empty-grey: #9698A9;
--color-empty-blue-card: #5445E5;
--color-empty-shadow-card: #3F32B2;
--color-empty-shadow-rounded: #998EFD;
--color-empty-blue: #5C40CC;
}
Penjelasan:
Variabel CSS | Nilai Warna | Penjelasan |
---|---|---|
--color-empty-bg | #FAFAFA | Warna latar belakang yang sangat terang, hampir putih. |
--color-empty-black | #1F1449 | Warna hitam keunguan gelap, biasanya untuk teks utama atau judul. |
--color-empty-grey | #9698A9 | Warna abu-abu netral, cocok untuk teks sekunder atau placeholder. |
--color-empty-blue-card | #5445E5 | Warna biru keunguan terang untuk elemen kartu utama. |
--color-empty-shadow-card | #3F32B2 | Warna lebih gelap dari blue-card , kemungkinan untuk bayangan kartu. |
--color-empty-shadow-rounded | #998EFD | Warna ungu muda, bisa digunakan untuk efek shadow dengan radius membulat. |
--color-empty-blue | #5C40CC | Warna biru keunguan, cocok untuk elemen primer seperti tombol atau ikon. |
Slicing 1

Tujuan
Mendesain elemen dengan pendekatan mobile-first agar responsif, dengan lebar maksimum 640px dan posisi terpusat di layar.
Code
<body>
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg"></main>
</body>
Penjelasan
Atribut/Utility CSS | Fungsi |
---|---|
relative | Mengatur posisi elemen relatif terhadap dirinya sendiri (untuk posisi absolut anaknya). |
mx-auto | Membuat margin kiri dan kanan otomatis → memusatkan secara horizontal. |
w-full | Mengatur lebar elemen 100% dari kontainer induknya. |
max-w-[640px] | Membatasi lebar maksimum ke 640px. |
overflow-hidden | Menyembunyikan isi yang meluap di luar kontainer. |
min-h-screen | Menetapkan tinggi minimum sama dengan tinggi layar (100vh). |
py-[151px] | Padding vertikal (atas dan bawah) sebesar 151px. |
px-[37.5px] | Padding horizontal (kiri dan kanan) sebesar 37.5px. |
bg-empty-bg | Menggunakan warna latar belakang dari variabel tema --color-empty-bg . |
Slicing 2

Tujuan
Tag <form> ini digunakan untuk mengirim data dari pengguna ke halaman lain, yaitu success-checkout.html, ketika form dikirim (biasanya saat tombol submit ditekan).
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<!-- dari sini -->
<form action="success-checkout.html"></form>
<!-- sampai sini -->
</main>
Penjelasan
Atribut | Nilai | Penjelasan |
---|---|---|
<form> | - | Elemen HTML yang digunakan untuk membungkus input dan tombol agar bisa dikirim. |
action | "success-checkout.html" | Menentukan URL tujuan saat form disubmit. Dalam hal ini, browser akan membuka halaman success-checkout.html setelah submit. |
Slicing 3

Tujuan
Elemen <section> ini digunakan untuk menampilkan sebuah kartu konten yang terstruktur secara vertikal, dengan jarak antar elemen, padding yang cukup, pojok membulat, warna latar belakang khusus, dan teks berwarna putih, serta siap menampung konten tambahan di dalamnya.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<!-- dari sini -->
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden"></section>
<!-- sampai sini -->
</form>
</main>
Penjelasan
Atribut/Utility CSS | Penjelasan |
---|---|
<section> | Elemen semantik untuk membungkus bagian tertentu dari konten. |
id="Card" | Memberikan identitas unik agar bisa diakses lewat JavaScript atau anchor. |
flex | Menjadikan kontainer sebagai flexbox (untuk tata letak fleksibel). |
flex-col | Mengatur arah tata letak flex ke kolom (vertikal). |
gap-[41px] | Jarak antar anak elemen sebesar 41px. |
p-6 | Padding ke seluruh sisi sebesar 1.5rem (24px). |
rounded-[34px] | Membuat sudut elemen melengkung sebesar 34px. |
relative | Posisi relatif untuk pengaturan posisi anak dengan absolute . |
bg-empty-blue-card | Memberi warna latar belakang dari variabel --color-empty-blue-card . |
text-white | Warna teks diatur menjadi putih. |
overflow-hidden | Menyembunyikan konten yang meluap dari batas elemen. |
Slicing 4

Tujuan
Untuk menampilkan informasi identitas pengguna (nama) di sebelah kiri dan indikator status atau tombol aksi pembayaran ("Pay") dengan ikon pesawat di sebelah kanan, dalam satu baris yang rapi dan sejajar.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<!-- dari sini -->
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<!-- sampai sini -->
</section>
</form>
</main>
Penjelasan
Atribut/Utility CSS | Penjelasan |
---|---|
flex items-center justify-between | Menyusun elemen secara horizontal, sejajar secara vertikal, dan diberi ruang di antara (kiri-kanan). |
relative z-20 | Elemen diberi posisi relatif (untuk layering), dan z-index 20 agar muncul di atas elemen lain. |
h2.font-light text-sm leading-[21px] | Teks "Name" berukuran kecil, tipis, dan tinggi baris 21px. |
strong.font-medium text-xl leading-[30px] | Nama "Kezia Rifqi" tampil menonjol dengan font medium dan ukuran 30px. |
div.flex.items-center.gap-[6px] | Menyusun ikon dan teks "Pay" secara horizontal dengan jarak 6px di antaranya. |
img.size-6 | Ikon pesawat dengan ukuran 1.5rem (24px × 24px). |
shrink-0 | Mencegah elemen (ikon dan kontainer kanan) mengecil saat ruang terbatas. |
Slicing 5

Tujuan
Bagian ini bertujuan untuk menampilkan saldo (balance) pengguna, dengan label "Balance" di atas dan nominal saldo yang ditampilkan secara mencolok dan mudah dibaca.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<!-- dari sini -->
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<!-- sampai sini -->
</section>
</form>
</main>
<!-- dari sini -->
<script src="./js/format-idr.js"></script>
<!-- sampai sini -->
JavaScript
// ./js/format-idr.js
let priceElement = document.getElementById("formatted-price");
let priceValue = parseInt(priceElement.textContent, 10);
priceElement.textContent = new Intl.NumberFormat("id-ID", {currency: "IDR", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(priceValue);
Penjelasan
Elemen/Utility CSS | Penjelasan |
---|---|
div.relative z-20 | Posisi relatif dan z-index: 20 , memastikan elemen ini berada di atas lapisan lainnya. |
h2.font-light text-sm leading-[21px] | Menampilkan label "Balance" dengan ukuran kecil dan font tipis. |
strong.font-medium text-[26px] leading-[39px] | Menonjolkan jumlah saldo dengan ukuran font 26px dan tinggi baris 39px. |
break-words | Memastikan teks akan dipatahkan (wrap) jika terlalu panjang untuk satu baris. |
<span id="formatted-price">280000000</span> | Elemen dinamis yang bisa diisi atau diformat menggunakan JavaScript, biasanya untuk menampilkan angka yang sudah diberi pemisah (misal: 280,000,000 ). |
JavaScript
Baris Kode | Penjelasan |
---|---|
let priceElement = document.getElementById("formatted-price"); | Mengambil elemen dengan ID formatted-price dari DOM. |
let priceValue = parseInt(priceElement.textContent, 10); | Mengambil teks dari elemen tersebut (misal: "280000000" ) dan mengubahnya menjadi angka (280000000 ). |
priceElement.textContent = ... | Mengganti isi teks elemen dengan hasil format angka. |
new Intl.NumberFormat("id-ID", {...}).format(priceValue); | Menggunakan Internationalization API untuk memformat angka sesuai dengan lokal Indonesia. |
Slicing 6

Tujuan
Ketiga elemen <span> ini tidak berisi konten dan hanya digunakan sebagai elemen latar visual (dekoratif)
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<!-- dari sini -->
<span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[35px] bottom-[-45px] bg-empty-shadow-card/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span>
<!-- sampai sini -->
</section>
</form>
</main>
Penjelasan
Elemen | Keterangan |
---|---|
1 | right-[-38px] top-[-45px] → Bulatan blur muncul di pojok kanan atas. Ukuran 107px, full circle, blur 50px. |
2 | left-[-29px] bottom-[-30px] → Bulatan blur muncul di pojok kiri bawah. Sama ukuran dan blur seperti elemen pertama. |
3 | left-[35px] right-[35px] bottom-[-45px] → Persegi panjang blur horizontal di bagian bawah kontainer, dengan transparansi (/50 ) dan radius 25px. |
Slicing 7

Tujuan
Bagian <header> ini adalah judul dan penjelasan singkat promosi yang dirancang untuk tampil di tengah layar secara estetis, konsisten dengan desain mobile-first dan tema UI yang modern.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[35px] bottom-[-45px] bg-empty-shadow-card/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span>
</section>
<!-- dari sini -->
<header class="mt-[91px] flex flex-col gap-[10px] w-[250px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Big Bonus🎉</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">We give you early credit so that you can buy a flight ticket</p>
</header>
<!-- sampai sini -->
</form>
</main>
Penjelasan
Elemen/Utility CSS | Penjelasan |
---|---|
<header> | Elemen header berfungsi sebagai bagian pembuka konten (heading + deskripsi). |
mt-[91px] | Memberikan margin atas sejauh 91px untuk memberi ruang dari elemen sebelumnya. |
flex flex-col gap-[10px] | Menyusun konten header secara vertikal dengan jarak 10px antar elemen. |
w-[250px] mx-auto | Lebar maksimum 250px dan posisi di tengah secara horizontal. |
<h1> | Judul utama: "Big Bonus🎉", dengan ukuran besar (32px), tinggi baris 48px, font tebal. |
text-center text-empty-black | Teks di tengah dan warna teks menggunakan variabel tema hitam. |
<p> | Paragraf deskripsi singkat, dengan font ringan dan warna abu-abu dari tema. |
leading-[28px] | Menentukan tinggi baris agar teks paragraf nyaman dibaca. |
Slicing 8

Tujuan
Tombol ini berfungsi sebagai pemicu pengiriman form yang akan membawa pengguna ke halaman tujuan success-checkout.html .
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[35px] bottom-[-45px] bg-empty-shadow-card/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span>
</section>
<header class="mt-[91px] flex flex-col gap-[10px] w-[250px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Big Bonus🎉</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">We give you early credit so that you can buy a flight ticket</p>
</header>
<!-- dari sini -->
<button type="submit" class="mt-[50px] font-medium text-lg leading-[27px] text-white bg-empty-blue py-3.5 px-[50px] mx-auto rounded-[17px] flex hover:shadow-lg shadow-empty-blue/40 transition-all duration-300">Start Fly Now</button>
<!-- sampai sini -->
</form>
</main>
Penjelasan
Elemen/Utility CSS | Penjelasan |
---|---|
type="submit" | Tombol ini akan mengirimkan data dari form jika ditekan. |
mt-[50px] | Memberi jarak 50px dari elemen di atasnya. |
font-medium text-lg leading-[27px] | Teks sedang (medium), ukuran besar (lg = sekitar 18px), dan tinggi baris 27px. |
text-white | Warna teks putih agar kontras dengan latar belakang. |
bg-empty-blue | Warna latar belakang tombol sesuai variabel tema biru. |
py-3.5 px-[50px] | Padding vertikal (atas-bawah) 3.5 unit (~14px), horizontal (kanan-kiri) 50px. |
mx-auto | Tombol diposisikan secara horizontal di tengah layar. |
rounded-[17px] | Sudut tombol dibuat membulat (border-radius 17px) untuk nuansa modern. |
flex | Mengaktifkan flexbox untuk menyusun konten tombol (berguna jika ada ikon + teks). |
hover:shadow-lg | Saat tombol disentuh/mouse hover, muncul efek bayangan besar. |
shadow-empty-blue/40 | Bayangan dasar dengan warna biru (dari tema) dan transparansi 40%. |
transition-all duration-300 | Efek transisi halus selama 300ms saat hover terjadi. |
Slicing 9

Tujuan
Elemen <main> ini adalah kerangka layout untuk halaman "success-checkout.html", didesain agar tampil rapi, modern, dan optimal di perangkat mobile.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg"></main>
Penjelasan
Elemen/Utility CSS | Penjelasan |
---|---|
relative | Elemen menjadi konteks posisi untuk elemen absolute di dalamnya. |
mx-auto | Menjadikan elemen ini berada di tengah horizontal. |
w-full | Lebar elemen dibuat penuh dari parent-nya. |
max-w-[640px] | Membatasi lebar maksimum hanya 640px (mobile-first design). |
overflow-hidden | Menyembunyikan elemen yang meluap dari batas area. |
min-h-screen | Tinggi minimum 100% dari tinggi layar perangkat. |
pt-[212px] pb-[151px] | Padding atas 212px dan bawah 151px, memberi ruang konten di dalamnya. |
px-[37.5px] | Padding kiri dan kanan sebesar 37.5px. |
bg-empty-bg | Background menggunakan warna tema dari variabel CSS. |
Slicing 10

Tujuan
Gambar ini adalah ikon sukses berformat .png yang ditampilkan di tengah halaman untuk memperkuat pesan keberhasilan pada halaman seperti success-checkout.html
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg">
<!-- dari sini -->
<img src="assets/images/backgrounds/success-co.png" alt="image" class="h-[150px] shrink-0 mx-auto" />
<!-- sampai sini -->
</main>
Penjelasan
Elemen/Utility CSS | Penjelasan |
---|---|
src="assets/images/backgrounds/success-co.png" | Menunjukkan sumber gambar berupa file .png , ilustrasi keberhasilan. |
alt="image" | Deskripsi alternatif untuk pembaca layar atau jika gambar gagal dimuat. |
class="h-[150px]" | Mengatur tinggi gambar tetap 150px. |
shrink-0 | Mencegah gambar mengecil jika berada dalam kontainer fleksibel (flex ). |
mx-auto | Membuat gambar berada di tengah secara horizontal. |
Slicing 11

Tujuan
Elemen <header> ini adalah bagian dari tampilan halaman sukses yang memberikan ucapan selamat dengan desain ramah pengguna dan mengajak pengguna untuk bersemangat melanjutkan perjalanan mereka.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg">
<img src="assets/images/backgrounds/success-co.png" alt="image" class="h-[150px] shrink-0 mx-auto" />
<!-- dari sini -->
<header class="mt-[80px] flex flex-col gap-[10px] w-[261px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Well Booked 😍</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">Are you ready to explore the new world of experiences?</p>
</header>
<!-- sampai sini -->
</main>
Penjelasan
<header>:
Elemen/Utility CSS | Penjelasan |
---|---|
mt-[80px] | Memberi margin atas sebesar 80px dari elemen sebelumnya. |
flex flex-col | Menyusun elemen di dalamnya secara kolom (vertikal). |
gap-[10px] | Memberi jarak antar elemen sebesar 10px. |
w-[261px] | Lebar maksimum header dibatasi 261px. |
mx-auto | Membuat elemen terpusat secara horizontal. |
- <h1>:
Elemen/Utility CSS | Penjelasan |
---|---|
text-center | Teks diratakan ke tengah. |
font-semibold | Mengatur ketebalan teks menjadi semi-bold. |
text-[32px] | Ukuran huruf 32px. |
leading-[48px] | Jarak antar baris 48px. |
text-empty-black | Warna teks menggunakan variabel tema --color-empty-black . |
<p>:
Elemen/Utility CSS | Penjelasan |
---|---|
text-center | Teks diratakan ke tengah. |
font-light | Mengatur ketebalan teks menjadi tipis. |
leading-[28px] | Jarak antar baris 28px. |
text-empty-grey | Warna teks menggunakan variabel tema --color-empty-grey . |
Slicing 12

Tujuan
Elemen ini berfungsi sebagai tombol ajakan yang dirancang responsif dan menarik untuk pengguna mengakses data pemesanan mereka dengan nyaman.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg">
<img src="assets/images/backgrounds/success-co.png" alt="image" class="h-[150px] shrink-0 mx-auto" />
<header class="mt-[80px] flex flex-col gap-[10px] w-[261px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Well Booked 😍</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">Are you ready to explore the new world of experiences?</p>
</header>
<!-- dari sini -->
<a href="#" class="mt-[50px] font-medium w-fit text-lg leading-[27px] text-white text-center bg-empty-blue py-3.5 px-[50px] mx-auto rounded-[17px] flex hover:shadow-lg shadow-empty-blue/40 transition-all duration-300">My Bookings</a>
<!-- sampai sini -->
</main>
Penjelasan
Elemen/Utility CSS | Penjelasan |
---|---|
href="#" | Tautan dummy, biasanya nanti diisi ke halaman seperti bookings.html . |
mt-[50px] | Memberi jarak ke atas sebesar 50px. |
font-medium | Mengatur ketebalan teks menjadi medium. |
w-fit | Lebar tombol menyesuaikan isi teks. |
text-lg | Ukuran teks besar (sekitar 18px). |
leading-[27px] | Jarak antar baris teks 27px. |
text-white | Warna teks putih. |
text-center | Meratakan teks ke tengah. |
bg-empty-blue | Warna latar menggunakan variabel tema --color-empty-blue . |
py-3.5 / px-[50px] | Padding vertikal dan horizontal untuk ukuran tombol yang nyaman. |
mx-auto | Menempatkan tombol di tengah secara horizontal. |
rounded-[17px] | Membuat sudut tombol melengkung 17px. |
flex | Menjadikan elemen sebagai flex container (berguna jika diisi ikon juga). |
hover:shadow-lg | Menambahkan bayangan besar saat kursor diarahkan. |
shadow-empty-blue/40 | Bayangan dengan warna biru transparan (40%). |
transition-all duration-300 | Efek transisi halus selama 300ms saat hover. |
Penutup
Semoga hasil slicing ini dapat memberikan manfaat dan wawasan baru. Memahami struktur serta alur slicing dengan baik akan sangat berguna ke depannya baik untuk pengembangan proyek, sebagai referensi desain, aset komersial, maupun untuk diintegrasikan dengan berbagai bahasa pemrograman secara lebih efisien.
Jangan lupa kunjungi website resmi shaynakit.com untuk mendapatkan berbagai desain dan file HTML gratis yang dapat langsung digunakan dalam proyek Anda.
Terima kasih!