oke, jadi disini aku pakenya itu tailwindcss CDN, jadi belom di compile.
siapa tau ada yang mau codenya, bisa langsung copas aja nih dibawah (dalam format .html)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.card-hover {
position: relative;
overflow: hidden;
}
.card-hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 50%);
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.card-hover:hover::after {
transform: translateX(100%);
}
</style>
</head>
<body class="bg-gray-100 min-h-screen p-8">
<div class="max-w-6xl mx-auto">
<!-- Grid Container -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Penghasilan Card -->
<div class="card-hover bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
<div class="flex items-center justify-between">
<div>
<p class="text-emerald-100 text-sm font-medium">Penghasilan</p>
<h3 class="text-white text-2xl font-bold mt-1">Rp 15.000.000</h3>
</div>
<div class="bg-emerald-300/30 p-3 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
</div>
<!-- Pengeluaran Card -->
<div class="card-hover bg-gradient-to-br from-rose-400 to-rose-600 rounded-xl p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
<div class="flex items-center justify-between">
<div>
<p class="text-rose-100 text-sm font-medium">Pengeluaran</p>
<h3 class="text-white text-2xl font-bold mt-1">Rp 8.500.000</h3>
</div>
<div class="bg-rose-300/30 p-3 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
</div>
<!-- Laba/Rugi Card -->
<div class="card-hover bg-gradient-to-br from-violet-400 to-violet-600 rounded-xl p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
<div class="flex items-center justify-between">
<div>
<p class="text-violet-100 text-sm font-medium">Laba/Rugi</p>
<h3 class="text-white text-2xl font-bold mt-1">Rp 6.500.000</h3>
</div>
<div class="bg-violet-300/30 p-3 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
</div>
</div>
<!-- Saldo Card -->
<div class="card-hover bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100 text-sm font-medium">Saldo</p>
<h3 class="text-white text-2xl font-bold mt-1">Rp 25.000.000</h3>
</div>
<div class="bg-blue-300/30 p-3 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</body>
</html>semoga bermanfaat!