💻 Coding & Web Developer Target AI: Claude 3.5 Sonnet / ChatGPT 👁️ 789 dilihat 📋 198 disalin

Konversi Elemen Desain UI ke Kode Komponen Tailwind CSS

Menerjemahkan deskripsi tampilan antarmuka (UI) menjadi kode HTML modern dengan kelas Tailwind CSS responsif dan ramah aksesibilitas.

⚡ Sesuaikan Variabel Prompt

Isi formulir di bawah ini. Teks prompt di kotak bawah akan otomatis terisi dan menyesuaikan secara real-time!

Misal Pricing Table Card Navbar [MISAL_PRICING_TABLE_CARD_NAVBAR]

Dark Mode Light Mode Glassmorphism [DARK_MODE_LIGHT_MODE_GLASSMORPHISM]

Hover Focus Active Transition [HOVER_FOCUS_ACTIVE_TRANSITION]

Elemen Tombol Badge Ikon [ELEMEN_TOMBOL_BADGE_IKON]

📝 Formula Prompt Siap Pakai: Otomatis update sesuai form di atas

Buatkan kode komponen antarmuka (UI) web responsif menggunakan Tailwind CSS versi 3.x / 4.x:

- Komponen yang Dibuat: [MISAL_PRICING_TABLE_CARD_NAVBAR]
- Tema Tampilan: [DARK_MODE_LIGHT_MODE_GLASSMORPHISM]
- Fitur Interaktif / State: [HOVER_FOCUS_ACTIVE_TRANSITION]
- Detail Elemen: [ELEMEN_TOMBOL_BADGE_IKON]

Syarat kode:
- 100% responsif (Mobile, Tablet, Desktop).
- Semantic HTML5 yang baik.
- Menggunakan transisi halus pada hover effect.

✨ Formula Template

🚀 Buka & Jalankan di AI:

📢 Bagikan prompt ini:

💬 WhatsApp 𝕏 Twitter/X ✈️ Telegram

<div class="max-w-sm rounded-2xl bg-white/10 backdrop-blur-md p-6 border border-white/20 shadow-xl hover:scale-105 transition-all duration-300">
  <span class="px-3 py-1 text-xs font-semibold text-emerald-400 bg-emerald-500/20 rounded-full">Terpopuler</span>
  <h3 class="text-xl font-bold text-white mt-4">Paket Pro</h3>
...</div>