<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard UI</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex h-screen">
<!-- SIDEBAR -->
<div class="w-20 bg-black/40 border-r border-white/10 flex flex-col items-center py-6 gap-6">
<div class="w-10 h-10 bg-blue-500 rounded-xl"></div>
<div class="w-8 h-8 bg-white/10 rounded-lg"></div>
<div class="w-8 h-8 bg-white/10 rounded-lg"></div>
<div class="w-8 h-8 bg-white/10 rounded-lg"></div>
<div class="w-8 h-8 bg-white/10 rounded-lg"></div>
</div>
<!-- MAIN -->
<div class="flex-1 p-10">
<!-- TOP BAR -->
<div class="flex justify-between items-center mb-10">
<div>
<h1 class="text-2xl font-semibold">Welcome back, Adam</h1>
<p class="text-sm">Track your finances and achieve your goals</p>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-white/20"></div>
<span class="text-sm">James Brown</span>
</div>
</div>
<!-- TOP CARDS -->
<div class="grid grid-cols-3 gap-6 mb-8">
<div class="card active p-6">
<p class="text-sm">Total Reach</p>
<h2 class="text-3xl font-bold mt-2">2,340,560</h2>
<p class="text-xs mt-2">vs last month +8%</p>
</div>
<div class="card p-6">
<p class="text-sm">Active Campaigns</p>
<h2 class="text-3xl font-bold mt-2">15</h2>
<p class="text-xs mt-2">vs last month +10%</p>
</div>
<div class="card p-6">
<p class="text-sm">Engagement Rate</p>
<h2 class="text-3xl font-bold mt-2">14.3%</h2>
<p class="text-xs mt-2">vs last month +5%</p>
</div>
</div>
<!-- BOTTOM -->
<div class="grid grid-cols-3 gap-6">
<!-- CHART -->
<div class="col-span-2 card p-6">
<div class="flex justify-between mb-4">
<h3>Overview Interaction</h3>
<span class="text-xs">Weekly</span>
</div>
<!-- fake graph line -->
<div class="h-40 relative">
<div class="absolute bottom-0 left-0 w-full h-[2px] bg-blue-400"></div>
<div class="absolute bottom-10 left-0 w-full h-[2px] bg-blue-400/50"></div>
<div class="absolute bottom-20 left-0 w-full h-[2px] bg-blue-400/30"></div>
</div>
<h2 class="text-2xl mt-6 font-bold">9,458,980</h2>
</div>
<!-- SIDE ANALYSIS -->
<div class="card p-6">
<h3 class="mb-4">Analysis Type Market</h3>
<h2 class="text-2xl font-bold">30,987,153</h2>
<div class="mt-6">
<p class="text-xs mb-2">Domestic</p>
<div class="w-full h-2 bg-white/10 rounded-full">
<div class="w-3/4 h-2 bg-blue-500 rounded-full"></div>
</div>
</div>
<div class="mt-4">
<p class="text-xs mb-2">International</p>
<div class="w-full h-2 bg-white/10 rounded-full">
<div class="w-1/2 h-2 bg-blue-400 rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>]]>
