348 lines
18 KiB
HTML
348 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>Expense Tracking Dashboard</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
"primary": "#2b8cee",
|
||
|
|
"background-light": "#f6f7f8",
|
||
|
|
"background-dark": "#111a22",
|
||
|
|
"card-dark": "#1a2632",
|
||
|
|
"card-light": "#ffffff",
|
||
|
|
"sidebar-light": "#ffffff",
|
||
|
|
"border-light": "#e2e8f0",
|
||
|
|
"text-main": "#0f172a",
|
||
|
|
"text-muted": "#64748b",
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
"display": ["Inter", "sans-serif"]
|
||
|
|
},
|
||
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #cbd5e1;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #94a3b8;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background-light text-text-main font-display overflow-hidden">
|
||
|
|
<div class="flex h-screen w-full">
|
||
|
|
<aside class="hidden lg:flex w-64 flex-col bg-sidebar-light border-r border-border-light shadow-sm z-20">
|
||
|
|
<div class="p-6 flex flex-col h-full justify-between">
|
||
|
|
<div class="flex flex-col gap-8">
|
||
|
|
<div class="flex gap-3 items-center">
|
||
|
|
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border border-border-light" data-alt="User profile picture showing a smiling professional" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuANUUrJ2rc1XWSNKLt215RxpZflCxewvvZq_ZylsIILmZIjcBUGlPtBIQNmsPHhZs6WjM660ExRzDkFkwHPzxwS6ta2zQ9lFfEMpKK9Ii7RTs6B-lCsDP94jjuZnAzZsrS-ZR_DLQjI16FAzAz_GvyrW9fSGpXcjzLFztbygeR64wagIlFwfYRd3RdlEG2GWH2aDXCrEO86UxzdHzBi13r2tqFH35vfLFwcg2kcbuLP4kkwWk_kese2hD4N0GgXuehsBv8AUzsQ6DU");'>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<h1 class="text-text-main text-base font-bold leading-none">Alex Morgan</h1>
|
||
|
|
<p class="text-text-muted text-xs font-normal mt-1">Free Plan</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nav class="flex flex-col gap-2">
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary border border-primary/10" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]" data-weight="fill">dashboard</span>
|
||
|
|
<span class="text-sm font-medium">Dashboard</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-slate-50 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">receipt_long</span>
|
||
|
|
<span class="text-sm font-medium">Transactions</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-slate-50 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">pie_chart</span>
|
||
|
|
<span class="text-sm font-medium">Reports</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-slate-50 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">folder_open</span>
|
||
|
|
<span class="text-sm font-medium">Documents</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-slate-50 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||
|
|
<span class="text-sm font-medium">Settings</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-slate-50 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">logout</span>
|
||
|
|
<span class="text-sm font-medium">Log out</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden relative bg-[#f8fafc]">
|
||
|
|
<header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light bg-white/80 backdrop-blur z-10 shrink-0 shadow-sm">
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<button class="lg:hidden text-text-main">
|
||
|
|
<span class="material-symbols-outlined">menu</span>
|
||
|
|
</button>
|
||
|
|
<h2 class="text-text-main text-lg font-bold">Dashboard</h2>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-6">
|
||
|
|
<div class="hidden md:flex items-center bg-slate-50 rounded-lg h-10 px-3 border border-border-light focus-within:border-primary transition-colors w-64">
|
||
|
|
<span class="material-symbols-outlined text-text-muted text-[20px]">search</span>
|
||
|
|
<input class="bg-transparent border-none text-text-main text-sm placeholder-slate-400 focus:ring-0 w-full ml-2" placeholder="Search expenses..." type="text"/>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<button class="bg-primary hover:bg-primary/90 text-white h-9 px-4 rounded-lg text-sm font-semibold shadow-md shadow-primary/20 transition-all flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
||
|
|
<span class="hidden sm:inline">Add Expense</span>
|
||
|
|
</button>
|
||
|
|
<button class="size-9 rounded-lg bg-white border border-border-light flex items-center justify-center text-text-muted hover:text-text-main hover:bg-slate-50 transition-colors relative shadow-sm">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||
|
|
<span class="absolute top-2 right-2.5 size-1.5 bg-red-500 rounded-full border border-white"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth">
|
||
|
|
<div class="max-w-7xl mx-auto flex flex-col gap-8 pb-10">
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6">
|
||
|
|
<div class="p-6 rounded-xl bg-white border border-border-light flex flex-col justify-between relative overflow-hidden group shadow-sm">
|
||
|
|
<div class="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
||
|
|
<span class="material-symbols-outlined text-6xl text-primary">payments</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-text-muted text-sm font-medium">Total Spent</p>
|
||
|
|
<h3 class="text-text-main text-3xl font-bold mt-2 tracking-tight">$2,450.00</h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 mt-4">
|
||
|
|
<span class="bg-green-500/10 text-green-600 text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||
|
|
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
||
|
|
12%
|
||
|
|
</span>
|
||
|
|
<span class="text-text-muted text-xs">vs last month</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="p-6 rounded-xl bg-white border border-border-light flex flex-col justify-between shadow-sm">
|
||
|
|
<div>
|
||
|
|
<p class="text-text-muted text-sm font-medium">Active Categories</p>
|
||
|
|
<h3 class="text-text-main text-3xl font-bold mt-2 tracking-tight">8</h3>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1.5 rounded-full mt-6 overflow-hidden">
|
||
|
|
<div class="bg-purple-500 h-full rounded-full" style="width: 65%"></div>
|
||
|
|
</div>
|
||
|
|
<p class="text-text-muted text-xs mt-2">65% of budget utilized</p>
|
||
|
|
</div>
|
||
|
|
<div class="p-6 rounded-xl bg-white border border-border-light flex flex-col justify-between shadow-sm">
|
||
|
|
<div>
|
||
|
|
<p class="text-text-muted text-sm font-medium">Total Transactions</p>
|
||
|
|
<h3 class="text-text-main text-3xl font-bold mt-2 tracking-tight">42</h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 mt-4">
|
||
|
|
<span class="bg-primary/10 text-primary text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||
|
|
<span class="material-symbols-outlined text-[14px]">add</span>
|
||
|
|
5 New
|
||
|
|
</span>
|
||
|
|
<span class="text-text-muted text-xs">this week</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||
|
|
<div class="xl:col-span-2 bg-white border border-border-light rounded-xl p-6 flex flex-col shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-6">
|
||
|
|
<div>
|
||
|
|
<h3 class="text-text-main text-lg font-bold">Monthly Trends</h3>
|
||
|
|
<p class="text-text-muted text-sm">Income vs Expense over time</p>
|
||
|
|
</div>
|
||
|
|
<button class="text-text-muted hover:text-text-main text-sm bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-lg transition-colors hover:bg-slate-100">Last 6 Months</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex items-end gap-3 sm:gap-6 min-h-[240px] px-2 pb-2">
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[140px] group-hover:bg-slate-100 transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/50 h-[60%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-text-muted text-xs font-medium">Jan</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[180px] group-hover:bg-slate-100 transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/60 h-[45%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-text-muted text-xs font-medium">Feb</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[160px] group-hover:bg-slate-100 transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/70 h-[70%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-text-muted text-xs font-medium">Mar</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[200px] group-hover:bg-slate-100 transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary h-[55%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-text-muted text-xs font-medium">Apr</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[150px] group-hover:bg-slate-100 transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/80 h-[80%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-text-muted text-xs font-medium">May</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[190px] group-hover:bg-slate-100 transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary h-[65%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-text-muted text-xs font-medium">Jun</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white border border-border-light rounded-xl p-6 flex flex-col shadow-sm">
|
||
|
|
<h3 class="text-text-main text-lg font-bold mb-1">Expense Distribution</h3>
|
||
|
|
<p class="text-text-muted text-sm mb-6">Breakdown by category</p>
|
||
|
|
<div class="flex-1 flex items-center justify-center relative">
|
||
|
|
<div class="size-52 rounded-full relative" style="background: conic-gradient(
|
||
|
|
#2b8cee 0% 35%,
|
||
|
|
#a855f7 35% 60%,
|
||
|
|
#0bda5b 60% 80%,
|
||
|
|
#f59e0b 80% 90%,
|
||
|
|
#ef4444 90% 100%
|
||
|
|
);">
|
||
|
|
<div class="absolute inset-4 bg-white rounded-full flex flex-col items-center justify-center z-10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]">
|
||
|
|
<span class="text-text-muted text-xs font-medium">Total</span>
|
||
|
|
<span class="text-text-main text-xl font-bold">$2,450</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-6 grid grid-cols-2 gap-y-2 gap-x-4">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-primary"></span>
|
||
|
|
<span class="text-text-muted text-xs">House</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-purple-500"></span>
|
||
|
|
<span class="text-text-muted text-xs">Mortgage</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-green-500"></span>
|
||
|
|
<span class="text-text-muted text-xs">Car</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-orange-500"></span>
|
||
|
|
<span class="text-text-muted text-xs">Food</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="text-text-main text-lg font-bold">Expense Categories</h3>
|
||
|
|
<a class="text-primary text-sm font-medium hover:text-primary/80" href="#">View All</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
|
|
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-green-500/10 flex items-center justify-center text-green-600 group-hover:bg-green-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">directions_car</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">3 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-sm font-medium">Car Expenses</span>
|
||
|
|
<span class="text-text-main text-xl font-bold mt-1">$450.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-green-500 h-full rounded-full" style="width: 18%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">home</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">5 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-sm font-medium">House Expenses-Bills</span>
|
||
|
|
<span class="text-text-main text-xl font-bold mt-1">$1,200.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-primary h-full rounded-full" style="width: 45%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-600 group-hover:bg-orange-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">restaurant</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">12 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-sm font-medium">Food & Drink</span>
|
||
|
|
<span class="text-text-main text-xl font-bold mt-1">$350.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-orange-500 h-full rounded-full" style="width: 14%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-red-500/10 flex items-center justify-center text-red-600 group-hover:bg-red-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">smoking_rooms</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">8 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-sm font-medium">Smoking</span>
|
||
|
|
<span class="text-text-main text-xl font-bold mt-1">$120.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-red-500 h-full rounded-full" style="width: 5%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-600 group-hover:bg-purple-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">account_balance</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">1 txn</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-sm font-medium">Mortgage</span>
|
||
|
|
<span class="text-text-main text-xl font-bold mt-1">$800.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-purple-500 h-full rounded-full" style="width: 32%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-600 group-hover:bg-cyan-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">shopping_cart</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">4 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-sm font-medium">Supermarket</span>
|
||
|
|
<span class="text-text-main text-xl font-bold mt-1">$200.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-cyan-500 h-full rounded-full" style="width: 8%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body></html>
|