Docs TailwindCSS

<div class="max-w-sm bg-white rounded-2xl shadow-md overflow-hidden transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border border-gray-100">
    <div class="relative">
        <img class="w-full h-52 object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Thumbnail">
        <div class="absolute top-4 right-4 bg-indigo-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-sm">
            Review Anime
        </div>
    </div>
    <div class="p-6">
        <h3 class="text-xl font-bold text-gray-900 mb-3 leading-tight">Eksplorasi Visual dan Alur Cerita Musim Ini</h3>
        <p class="text-gray-600 text-sm mb-5 line-clamp-3">
            Analisis mendalam mengenai teknik animasi terbaru dan bagaimana studio menggabungkan elemen 3D ke dalam gaya gambar tangan tradisional untuk menciptakan adegan epik.
        </p>
        <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-semibold text-sm transition-colors">
            Baca Selengkapnya 
            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
    </div>
</div>

<div class="max-w-sm w-full bg-white rounded-2xl shadow-sm hover:shadow-lg transition-shadow duration-300 border border-gray-100 p-4">
    <div class="relative rounded-xl overflow-hidden mb-5 group">
        <img class="w-full h-48 object-cover transition-transform duration-700 group-hover:scale-110" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="3D Asset">
        
        <!-- Overlay transparan yang muncul saat hover -->
        <div class="absolute inset-0 bg-gray-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
            <button class="bg-white text-gray-900 font-bold py-2 px-5 rounded-lg shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                Pratinjau 3D
            </button>
        </div>
    </div>
    <div class="flex justify-between items-start px-1">
        <div>
            <h3 class="font-bold text-gray-800 text-lg">Sci-Fi Environment Pack</h3>
            <p class="text-gray-500 text-sm font-medium mt-1">Blender & Unity 3D</p>
        </div>
        <span class="bg-emerald-50 text-emerald-600 border border-emerald-200 text-xs font-bold px-2.5 py-1.5 rounded-lg">Gratis</span>
    </div>
</div>

<div class="max-w-xs bg-white rounded-3xl shadow-lg overflow-hidden border border-gray-100">
    <!-- Cover Image -->
    <div class="h-32 w-full relative">
        <img class="w-full h-full object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Cover">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
    </div>
    <!-- Avatar (Menggunakan gambar yang sama sebagai contoh) -->
    <div class="flex justify-center -mt-14 relative z-10">
        <img class="w-28 h-28 rounded-full border-4 border-white object-cover shadow-md bg-gray-100" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Avatar">
    </div>
    <div class="text-center px-6 pt-3 pb-8">
        <h2 class="text-xl font-bold text-gray-800">Programmer & Staff</h2>
        <p class="text-gray-500 text-sm mt-1">Spesialis Integrasi Sistem Manning Agency</p>
        
        <div class="flex justify-center gap-2 mt-5">
            <span class="bg-red-50 text-red-600 text-xs px-3 py-1 rounded-full font-medium border border-red-100">Laravel</span>
            <span class="bg-cyan-50 text-cyan-600 text-xs px-3 py-1 rounded-full font-medium border border-cyan-100">Tailwind</span>
            <span class="bg-indigo-50 text-indigo-600 text-xs px-3 py-1 rounded-full font-medium border border-indigo-100">PHP</span>
        </div>
    </div>
</div>

<div class="relative max-w-md w-full p-8 rounded-3xl overflow-hidden shadow-2xl group">
    <!-- Background Parent (Untuk menampilkan efek kaca) -->
    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" alt="Background">
    
    <!-- Efek Glassmorphism Murni Tailwind -->
    <div class="absolute inset-0 bg-white/10 backdrop-blur-md border border-white/20"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50"></div>
    
    <!-- Konten di Atas Kaca -->
    <div class="relative z-10 text-white">
        <div class="w-12 h-12 bg-white/20 rounded-xl backdrop-blur-sm flex items-center justify-center border border-white/30 mb-6">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 tracking-wide drop-shadow-md">UI Futuristik</h3>
        <p class="text-white/90 mb-8 text-sm font-light leading-relaxed drop-shadow">
            Desain elegan yang memanfaatkan utilitas `backdrop-blur` murni. Sangat ideal untuk antarmuka aplikasi modern atau landing page yang berfokus pada visual.
        </p>
        <button class="w-full bg-white/20 hover:bg-white/30 border border-white/40 backdrop-blur-sm text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300">
            Terapkan Desain
        </button>
    </div>
</div>

<div class="flex flex-col sm:flex-row max-w-2xl bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-100 group">
    <!-- Bagian Gambar -->
    <div class="w-full sm:w-2/5 h-56 sm:h-auto relative overflow-hidden">
        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Thumbnail">
    </div>
    
    <!-- Bagian Teks -->
    <div class="w-full sm:w-3/5 p-6 flex flex-col justify-center">
        <div class="flex items-center gap-2 mb-2">
            <span class="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span>
            <span class="text-xs font-bold text-orange-500 uppercase tracking-wider">Tutorial Baru</span>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-orange-600 transition-colors">Integrasi Model 3D ke Web</h3>
        <p class="text-gray-600 text-sm mb-5">
            Panduan lengkap mengoptimalkan hasil render dari Blender untuk ditampilkan ke dalam aplikasi web interaktif tanpa membebani kinerja server.
        </p>
        <div class="flex items-center gap-3 mt-auto">
            <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
                <img class="w-full h-full object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Author">
            </div>
            <div class="text-sm">
                <p class="font-semibold text-gray-800 leading-none">Admin Staff</p>
                <p class="text-gray-400 text-xs mt-1">14 Juni 2026</p>
            </div>
        </div>
    </div>
</div>

<div class="w-72 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 group">
    <div class="relative overflow-hidden h-48">
        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Asset">
        <div class="absolute top-3 left-3 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-bold text-gray-800 shadow-sm">
            <span class="text-orange-500">★</span> 4.9 (120)
        </div>
    </div>
    <div class="p-5">
        <h3 class="font-bold text-gray-900 text-lg mb-1 truncate">Rigged Anime Character</h3>
        <p class="text-gray-500 text-sm mb-4">Format: .blend & .unitypackage</p>
        <div class="flex items-center justify-between mt-auto">
            <span class="text-xl font-black text-indigo-600">Rp 150.000</span>
            <button class="bg-gray-900 hover:bg-indigo-600 text-white p-2.5 rounded-xl transition-colors duration-300 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
            </button>
        </div>
    </div>
</div>

<div class="w-full max-w-sm bg-gray-900 rounded-3xl p-1 relative overflow-hidden group">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 opacity-50 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
    
    <div class="relative bg-gray-900 rounded-[22px] p-6 h-full flex flex-col z-10">
        <div class="flex justify-between items-start mb-6">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-3 text-center min-w-[60px]">
                <span class="block text-indigo-400 text-xs font-bold uppercase">Jun</span>
                <span class="block text-white text-xl font-black">24</span>
            </div>
            <span class="bg-blue-500/10 text-blue-400 text-xs font-semibold px-3 py-1 rounded-full border border-blue-500/20">Online</span>
        </div>
        
        <h3 class="text-white text-xl font-bold mb-2">Laravel Dev Meetup</h3>
        <p class="text-gray-400 text-sm mb-6">Membahas best practices pembuatan API dan optimalisasi query untuk aplikasi skala besar.</p>
        
        <div class="mt-auto flex items-center justify-between">
            <div class="flex -space-x-3">
                <img class="w-8 h-8 rounded-full border-2 border-gray-900 object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Peserta 1">
                <img class="w-8 h-8 rounded-full border-2 border-gray-900 object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Peserta 2">
                <div class="w-8 h-8 rounded-full border-2 border-gray-900 bg-gray-700 flex items-center justify-center text-[10px] text-white font-bold">+42</div>
            </div>
            <button class="text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded-lg transition-colors">
                Daftar
            </button>
        </div>
    </div>
</div>

<div class="max-w-md w-full bg-white p-8 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-50 relative mt-8">
    <div class="absolute -top-6 right-8 bg-indigo-500 w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform -rotate-12">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6 text-white" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
    </div>
    
    <p class="text-gray-600 text-base italic leading-relaxed mb-6 relative z-10">
        "Sistem perekrutan dan manajemen kru kapal (manning agency) yang baru ini sangat responsif. Integrasinya mulus dan mempermudah proses pendataan secara signifikan."
    </p>
    
    <div class="flex items-center gap-4">
        <img class="w-12 h-12 rounded-full object-cover shadow-sm" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Reviewer">
        <div>
            <h4 class="font-bold text-gray-900">Budi Santoso</h4>
            <p class="text-xs text-gray-500 font-medium mt-0.5">HR Director</p>
        </div>
    </div>
</div>

<div class="w-full max-w-sm bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer flex gap-4 items-start">
    <div class="relative shrink-0">
        <img class="w-10 h-10 rounded-full object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="User">
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
    </div>
    <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-800">
            <span class="font-bold text-gray-900">Andi</span> baru saja mengunggah dokumen persyaratan pelaut.
        </p>
        <p class="text-xs text-gray-400 mt-1 flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3 h-3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            10 menit yang lalu
        </p>
    </div>
</div>

<div class="w-64 bg-white p-3 pb-10 shadow-md hover:shadow-2xl hover:-rotate-3 hover:scale-105 transition-all duration-300 ease-out border border-gray-200">
    <div class="w-full h-56 bg-gray-100 overflow-hidden relative">
        <img class="w-full h-full object-cover" src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" alt="Artwork">
        <div class="absolute inset-0 shadow-[inset_0_0_20px_rgba(0,0,0,0.2)]"></div>
    </div>
    
    <div class="mt-4 text-center">
        <h3 class="font-handwriting text-gray-800 text-lg font-bold">Sketsa Konsep</h3>
        <p class="text-gray-400 text-xs mt-1">Eksplorasi visual #01</p>
    </div>
</div>