All Prompts
All Prompts
dashboardlayouttailwindresponsivefinanceanimatedstatswalletui
Wallet Dashboard Layout with Sidebar & Stats
Адаптивный UI-макет дашборда кошелька с боковой панелью и статистикой. Создан на Tailwind CSS для удобного управления финансами.
Prompt
<div
class="border-gradient before:rounded-[28px] [animation:fadeSlideIn_0.5s_ease-in-out_0.05s_both] xl:bg-neutral-900/80 bg-neutral-900/40 rounded-[28px] mr-auto ml-auto shadow-[0_20px_120px_-20px_rgba(0,0,0,0.7)] backdrop-blur-xl"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1)">
<!-- Desktop chrome -->
<div
class="flex sm:px-6 [animation:fadeSlideIn_0.5s_ease-in-out_0.1s_both] border-white/5 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1)">
<div class="flex gap-3 items-center [animation:fadeSlideIn_0.5s_ease-in-out_0.15s_both]">
<div class="flex gap-2 items-center">
<span class="h-3.5 w-3.5 rounded-full bg-red-500/90"></span>
<span class="h-3.5 w-3.5 rounded-full bg-amber-400/90"></span>
<span class="h-3.5 w-3.5 rounded-full bg-emerald-500/90"></span>
</div>
<div class="inline-flex items-center gap-2 px-3">
<span class="text-xl font-semibold tracking-tight text-white font-geist">Wallet</span>
<span class="text-xs text-white/40 font-geist">Desktop</span>
</div>
</div>
<!-- Top actions -->
<div class="flex items-center gap-2 sm:gap-3 [animation:fadeSlideIn_0.5s_ease-in-out_0.2s_both]">
<div class="hidden md:flex items-center gap-2">
<button class="inline-flex gap-2 border-gradient before:rounded-lg hover:bg-white/10 text-sm text-slate-300 bg-white/5 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M12 2v20M2 12h20" class=""></path></svg>
New Transaction
</button>
</div>
<button class="inline-flex border-gradient before:rounded-lg hover:bg-white/10 bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-slate-300"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- Content grid -->
<div class="grid grid-cols-12">
<!-- Sidebar -->
<aside class="col-span-12 md:col-span-3 lg:col-span-3 border-white/5 border-r">
<div class="p-4 sm:p-6">
<div class="mb-6 [animation:fadeSlideIn_0.5s_ease-in-out_0.25s_both]">
<div class="flex items-center gap-3 mb-4">
<img class="h-10 w-10 rounded-lg object-cover border-gradient before:rounded-lg" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9bf583f7-9a93-46c4-bb0a-4effddb01c86_320w.webp" alt="profile">
<div class="">
<p class="text-sm font-semibold text-white font-geist">Alex Chen</p>
<p class="text-xs text-slate-400 font-geist">Premium Account</p>
</div>
</div>
</div>
<nav class="space-y-6">
<div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.3s_both]">
<p class="mb-2 text-xs uppercase tracking-wider text-slate-400 font-geist">Overview</p>
<ul class="space-y-1">
<li class="">
<a href="#"
class="group flex items-center gap-3 text-sm text-white bg-white/10 rounded-lg pt-2 pr-3 pb-2 pl-3 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4">
<rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
<rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
<rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
</svg>
Dashboard
</a>
</li>
<li class="">
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<line x1="12" x2="12" y1="2" y2="22" class=""></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
Accounts
</a>
</li>
<li class="">
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
Transactions
</a>
</li>
</ul>
</div>
<div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.35s_both]">
<p class="mb-2 text-xs uppercase tracking-wider text-slate-400 font-geist">Tools</p>
<ul class="space-y-1">
<li class="">
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
<path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
</svg>
Cards
</a>
</li>
<li class="">
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<line x1="12" y1="1" x2="12" y2="23" class=""></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
Transfers
</a>
</li>
<li class="">
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<line x1="18" x2="18" y1="20" y2="10" class=""></line>
<line x1="12" x2="12" y1="20" y2="4" class=""></line>
<line x1="6" x2="6" y1="20" y2="14" class=""></line>
</svg>
Analytics
</a>
</li>
</ul>
</div>
<div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.4s_both]">
<p class="mb-2 text-xs uppercase tracking-wider text-slate-400 font-geist">Quick Access</p>
<div class="grid grid-cols-2 gap-2">
<div class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-3 text-center">
<p class="text-xl font-semibold text-white font-geist">$12,450</p>
<p class="text-xs text-slate-400 font-geist">Balance</p>
</div>
<div class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-3 text-center">
<p class="text-xl font-semibold text-emerald-300 font-geist">+$420</p>
<p class="text-xs text-slate-400 font-geist">This month</p>
</div>
</div>
</div>
<div class="space-y-1 [animation:fadeSlideIn_0.5s_ease-in-out_0.45s_both]">
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
Settings
</a>
<a href="#"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-slate-400 group-hover:text-slate-200">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path>
<path d="M12 17h.01" class=""></path>
</svg>
Help & Support
</a>
</div>
</nav>
</div>
</aside>
<!-- Main content -->
<section class="col-span-12 md:col-span-9 lg:col-span-9 relative">
<div class="relative h-full min-h-[720px] flex flex-col">
<!-- Content area -->
<div class="flex-1 sm:px-8 overflow-y-auto pt-8 pr-4 pb-8 pl-4 space-y-6">
<!-- Header -->
<div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.5s_both]">
<h2 class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">Welcome back, Alex</h2>
<p class="text-sm text-slate-400 font-geist">Here's what's happening with your accounts today.</p>
</div>
<!-- Stats cards -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 [animation:fadeSlideIn_0.5s_ease-in-out_0.55s_both]">
<div class="rounded-xl border-gradient before:rounded-xl bg-white/5 p-4 backdrop-blur-sm">
<div class="flex items-center justify-between mb-2">
<p class="text-xs text-slate-400 uppercase tracking-wider font-geist">Total Balance</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-emerald-400">
<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
<path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
</svg>
</div>
<p class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">$24,850.42</p>
<div class="flex items-center gap-1 text-xs">
<span class="text-emerald-400 font-geist">+12.5%</span>
<span class="text-slate-500 font-geist">vs last month</span>
</div>
</div>
<div class="rounded-xl border-gradient before:rounded-xl bg-white/5 p-4 backdrop-blur-sm">
<div class="flex items-center justify-between mb-2">
<p class="text-xs text-slate-400 uppercase tracking-wider font-geist">Spending</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-orange-400">
<path d="M3 3v18h18" class=""></path>
<path d="m19 9-5 5-4-4-3 3" class=""></path>
</svg>
</div>
<p class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">$3,249.18</p>
<div class="flex items-center gap-1 text-xs">
<span class="text-orange-400 font-geist">-8.2%</span>
<span class="text-slate-500 font-geist">vs last month</span>
</div>
</div>
<div class="border-gradient before:rounded-xl bg-white/5 rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm">
<div class="flex items-center justify-between mb-2">
<p class="text-xs text-slate-400 uppercase tracking-wider font-geist">Savings Goal</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 text-blue-400">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M12 16v-4" class=""></path>
<path d="M12 8h.01" class=""></path>
</svg>
</div>
<p class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">68%</p>
<div class="w-full bg-white/10 rounded-full h-1.5 mt-2">
<div class="bg-gradient-to-r from-orange-300 to-orange-400 h-1.5 rounded-full" style="width: 68%"></div>
</div>
</div>
</div>
<!-- Recent transactions -->
<div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.6s_both]">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-white font-geist">Recent Transactions</h3>
<button class="text-sm text-slate-400 hover:text-white transition font-geist">View all</button>
</div>
<div class="space-y-2">
<div
class="border-gradient before:rounded-lg flex bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-emerald-400">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="17 8 12 3 7 8" class=""></polyline>
<line x1="12" x2="12" y1="3" y2="15" class=""></line>
</svg>
</div>
<div>
<p class="text-sm font-medium text-white font-geist">Salary Deposit</p>
<p class="text-xs text-slate-400 font-geist">Today, 9:24 AM</p>
</div>
</div>
<p class="text-base font-semibold text-emerald-400 font-geist">+$4,250.00</p>
</div>
<div
class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-4 backdrop-blur-sm flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-orange-400">
<path d="M3 3v18h18" class=""></path>
<rect width="4" height="7" x="7" y="10" rx="1" class=""></rect>
</svg>
</div>
<div>
<p class="text-sm font-medium text-white font-geist">Amazon Purchase</p>
<p class="text-xs text-slate-400 font-geist">Yesterday, 3:42 PM</p>
</div>
</div>
<p class="text-base font-semibold text-white font-geist">-$84.99</p>
</div>
<div
class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-4 backdrop-blur-sm flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-blue-400">
<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
<path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
</svg>
</div>
<div>
<p class="text-sm font-medium text-white font-geist">Netflix Subscription</p>
<p class="text-xs text-slate-400 font-geist">Dec 28, 2024</p>
</div>
</div>
<p class="text-base font-semibold text-white font-geist">-$15.99</p>
</div>
</div>
</div>
<!-- Quick actions -->
<div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.65s_both]">
<h3 class="text-lg font-semibold text-white mb-4 font-geist">Quick Actions</h3>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
<button class="border-gradient before:rounded-lg hover:bg-white/10 transition bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><line x1="12" y1="1" x2="12" y2="23" class=""></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path></svg>
<p class="text-xs text-slate-300 font-geist">Send Money</p>
</button>
<button class="border-gradient before:rounded-lg hover:bg-white/10 transition bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path><path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path></svg>
<p class="text-xs text-slate-300 font-geist">Pay Bills</p>
</button>
<button class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-4 backdrop-blur-sm hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
<p class="text-xs text-slate-300 font-geist">Deposit</p>
</button>
<button class="border-gradient before:rounded-lg hover:bg-white/10 transition bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><line x1="18" x2="18" y1="20" y2="10" class=""></line><line x1="12" x2="12" y1="20" y2="4" class=""></line><line x1="6" x2="6" y1="20" y2="14" class=""></line></svg>
<p class="text-xs text-slate-300 font-geist">Analytics</p>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>