All Prompts
All Prompts
dashboardanalyticstailwindresponsiveadmincampaignchartinteractivesectionui
Campaign Analytics Dashboard Layout
Адаптивный дашборд для аналитики кампаний. Три колонки: список, метрики, график. Фильтры, виджеты. Tailwind CSS. Идеально для SaaS-платформ.
Prompt
<div
class="-mb-8 md:px-6 md:pt-24 [animation:fadeSlideIn_0.8s_ease-out_0.8s_both] animate-on-scroll animate origin-top max-w-7xl mr-auto ml-auto pt-24 pr-4 pl-4 scale-75 flex items-center justify-center min-h-screen">
<div
class="relative w-full overflow-hidden bg-white/[0.04] border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl">
<!-- Topbar -->
<div class="flex items-center justify-between border-b border-white/10 px-3 py-2">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-500/80"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
<span class="h-3 w-3 rounded-full bg-green-500/80"></span>
</div>
<div class="flex items-center gap-2"></div>
</div>
<!-- Platform body -->
<div class="grid grid-cols-1 md:grid-cols-12">
<!-- Left panel - Campaigns -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-r pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class=""></path>
<polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
<line x1="12" x2="12" y1="22" y2="12" class=""></line>
</svg>
Campaigns
</div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="M12 5v14" class=""></path>
</svg>
</button>
</div>
<div class="flex flex-col text-slate-300 h-[520px] space-y-4">
<!-- Campaign Filters -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-blue-600 text-white rounded font-sans">
Active
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Draft
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Archive
</button>
</div>
<!-- Quick Actions -->
<!-- Active Campaigns List -->
<div class="bg-white/5 rounded-lg p-2 flex-1">
<div class="text-xs text-slate-400 mb-2 font-sans">
Active Campaigns
</div>
<ul class="space-y-1 text-xs">
<li class="flex items-center gap-2 rounded-md bg-blue-500/20 px-2 py-1 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-blue-400">
<circle cx="12" cy="12" r="10" class=""></circle>
<polyline points="12 6 12 12 16 14" class=""></polyline>
</svg>
Summer Launch 2025
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-blue-400">
89%
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-cyan-400">
<path
d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
class=""></path>
<path d="M9 18h6" class=""></path>
<path d="M10 22h4" class=""></path>
</svg>
Product Features
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-yellow-400">
62%
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-blue-400">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path>
</svg>
Security Update
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-blue-400">
95%
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-purple-400">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
Pricing Changes
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-cyan-400">78%</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-slate-500">
<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>
Mobile App Beta
<div class="ml-auto">
<span class="text-xs text-slate-500 font-sans">
Paused
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-red-400">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
class=""></path>
<line x1="12" x2="12" y1="9" y2="13" class=""></line>
<line x1="12" x2="12.01" y1="17" y2="17" class=""></line>
</svg>
Q2 Webinar Series
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-orange-400">
45%
</span>
</div>
</li>
</ul>
</div>
<!-- Performance Stats -->
<div class="bg-white/5 rounded-lg p-2 mt-3">
<div class="mb-1 flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 text-blue-400">
<line x1="12" y1="20" x2="12" y2="10" class=""></line>
<line x1="18" y1="20" x2="18" y2="4" class=""></line>
<line x1="6" y1="20" x2="6" y2="16" class=""></line>
</svg>
<span class="text-xs font-medium font-sans">
Performance
</span>
</div>
<div class="flex gap-1">
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-slate-400">
<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>
</button>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-3 h-2 rounded-sm bg-blue-500"></div>
<span class="text-slate-300 font-sans text-[10px]">
Conversion Rate
</span>
<div class="ml-auto text-[10px] text-blue-400">
+12.3%
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-4 h-2 bg-blue-500 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Page Views
</span>
<div class="ml-auto text-[10px] text-blue-400">
847K
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-5 h-2 bg-purple-500 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Engagement
</span>
<div class="ml-auto text-[10px] text-purple-400">
+8.7%
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-3 h-2 bg-cyan-400 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Click Rate
</span>
<div class="ml-auto text-[10px] text-cyan-400">
4.2%
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-4 h-2 bg-orange-400 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Avg. Session
</span>
<div class="ml-auto text-[10px] text-slate-400">
3m 24s
</div>
</div>
</div>
</div>
</div>
</aside>
<!-- Center - Analytics Dashboard -->
<main class="relative md:col-span-6 bg-black/20">
<div class="flex items-center gap-2 border-b border-white/10 px-3 py-2 text-xs text-slate-300">
<span class="font-sans">Analytics Dashboard</span>
<div class="text-slate-500">•</div>
<span class="font-sans text-slate-400">Last 30 days</span>
<div class="ml-auto flex items-center gap-1">
<div class="text-xs text-slate-400 font-sans">
Updated 5m ago
</div>
<div class="h-4 w-px bg-white/10 mx-2"></div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" class=""></path>
<path d="M21 3v5h-5" class=""></path>
</svg>
</button>
</div>
</div>
<!-- Dashboard Toolbar -->
<div
class="flex flex-col sm:flex-row gap-2 bg-black/10 border-white/10 border-b pt-2 pr-3 pb-2 pl-3 gap-x-2 gap-y-2 items-center justify-between">
<div class="flex items-center gap-2 w-full sm:w-auto">
<button class="p-1 rounded border border-white/10 bg-blue-600 text-white hover:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<line x1="12" y1="20" x2="12" y2="10" class=""></line>
<line x1="18" y1="20" x2="18" y2="4" class=""></line>
<line x1="6" y1="20" x2="6" y2="16" class=""></line>
</svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
</svg>
</button>
<div class="h-4 w-px bg-white/10"></div>
<div class="flex items-center gap-1 flex-1">
<span class="text-xs text-slate-400 font-sans">Period:</span>
<button class="inline-flex items-center justify-center px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 font-sans whitespace-nowrap">
30 Days
</button>
<button class="sm:hidden p-1 rounded border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10 ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<line x1="4" x2="20" y1="12" y2="12" class=""></line>
<line x1="4" x2="20" y1="6" y2="6" class=""></line>
<line x1="4" x2="20" y1="18" y2="18" class=""></line>
</svg>
</button>
</div>
</div>
<div class="hidden sm:flex items-center gap-2">
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 font-sans">
Overview
</button>
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-400 hover:bg-white/10 font-sans">
Campaigns
</button>
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-400 hover:bg-white/10 font-sans">
Users
</button>
</div>
</div>
<div class="sm:p-6 pt-4 pr-4 pb-4 pl-4">
<div
class="overflow-hidden min-h-[400px] grid grid-rows-[auto,1fr,auto] sm:min-h-[450px] sm:pt-0 sm:pb-0 sm:pl-0 sm:pr-0 border-0 rounded-none ring-0 pt-0 pr-0 pb-0 pl-0 gap-x-4 gap-y-4">
<!-- Row 1: Key Metrics -->
<div class="grid grid-cols-2 gap-3">
<div class="xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400 font-sans">
Total Users
</span>
</div>
<div class="text-2xl font-medium text-white font-sans">
47,329
</div>
<div class="text-xs mt-1 font-sans text-blue-400">
+15.3% from last month
</div>
</div>
<div class="xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400 font-sans">
Revenue
</span>
</div>
<div class="text-2xl font-medium text-white font-sans">
$284K
</div>
<div class="text-xs mt-1 font-sans text-blue-400">
+22.8% from last month
</div>
</div>
</div>
<!-- Row 2: Chart (grows) -->
<div class="min-h-0 xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium text-white font-sans">
Campaign Performance
</h3>
<span class="text-xs text-slate-400 font-sans">
Weekly trend
</span>
</div>
<div class="relative h-32 sm:h-40">
<div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 h-full">
<div class="flex-1 bg-blue-500/60 rounded-t" style="height:45%"></div>
<div class="flex-1 bg-blue-500/60 rounded-t" style="height:62%"></div>
<div class="flex-1 bg-blue-500/80 rounded-t" style="height:78%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height:95%"></div>
<div class="flex-1 bg-blue-500/80 rounded-t" style="height:88%"></div>
<div class="flex-1 bg-blue-500/60 rounded-t" style="height:71%"></div>
<div class="flex-1 bg-blue-500/40 rounded-t" style="height:54%"></div>
</div>
</div>
<div class="flex justify-between mt-2 text-[10px] text-slate-500 font-sans">
<span>Mon</span>
<span class="">Tue</span>
<span>Wed</span>
<span class="">Thu</span>
<span>Fri</span>
<span class="">Sat</span>
<span>Sun</span>
</div>
</div>
<!-- Row 3: Status Indicators (fixed at bottom) -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<div
class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur">
<div class="text-xl font-medium text-blue-400">
92%
</div>
<div class="text-[10px] text-slate-400 font-sans">
Active Rate
</div>
</div>
<div
class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur">
<div class="text-xl font-medium font-sans text-blue-400">
3.2K
</div>
<div class="text-[10px] text-slate-400 font-sans">
New Signups
</div>
</div>
<div
class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur">
<div class="text-xl font-medium text-purple-400">
68%
</div>
<div class="text-[10px] text-slate-400 font-sans">
Retention
</div>
</div>
<div
class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur">
<div class="text-xl font-medium text-cyan-400 font-sans">
4.2
</div>
<div class="text-[10px] text-slate-400 font-sans">
Avg Rating
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Right panel - Campaign Settings -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-l pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
<path
d="M12.22 2h-.44a2 v.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
</div>
<div class="flex gap-1">
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
<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>
<!-- Settings Tabs -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-blue-600 text-white rounded font-sans">
Campaign
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Targeting
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Budget
</button>
</div>
<div class="space-y-3 h-[480px] overflow-y-auto">
<!-- Campaign Info -->
<div class="bg-white/5 rounded-lg p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-300 font-sans">
Active Campaign
</span>
<span class="text-xs text-blue-400 font-sans">
Summer Launch
</span>
</div>
<div class="text-[10px] text-slate-500 space-y-1 font-sans">
<div class="flex justify-between">
<span class="">Status:</span>
<span class="text-blue-400">Active</span>
</div>
<div class="flex justify-between">
<span>Budget:</span>
<span>$25,000</span>
</div>
<div class="flex justify-between">
<span class="">Spend:</span>
<span>$18,420</span>
</div>
</div>
</div>
<!-- Audience Settings -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 text-xs">
<span class="text-slate-300 font-sans">
Target Audience
</span>
</div>
<div class="space-y-2 text-[10px]">
<div class="">
<div class="text-slate-400 mb-1 font-sans">
Age Range
</div>
<div class="flex items-center gap-2">
<input type="range" class="flex-1 h-1 bg-white/10 rounded-full appearance-none" value="35" min="18" max="65">
<span class="text-slate-400 font-sans w-12">
25-45
</span>
</div>
</div>
<div class="">
<div class="text-slate-400 mb-1 font-sans">
Location
</div>
<select class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-400 font-sans">
<option>United States</option>
<option>Canada</option>
<option>United Kingdom</option>
<option>Global</option>
</select>
</div>
<div class="">
<div class="text-slate-400 mb-1 font-sans">
Industry
</div>
<select class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-400 font-sans">
<option>Technology</option>
<option>Healthcare</option>
<option>Finance</option>
<option>Education</option>
</select>
</div>
</div>
</div>
<!-- Schedule Settings -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">Schedule</span>
<button class="text-[10px] text-blue-400 hover:text-blue-300 font-sans">
Edit
</button>
</div>
<div class="space-y-2 text-[10px]">
<div class="flex justify-between">
<span class="text-slate-400 font-sans">
Start Date:
</span>
<span class="text-slate-300 font-sans">
Jun 1, 2025
</span>
</div>
<div class="flex justify-between">
<span class="text-slate-400 font-sans">
End Date:
</span>
<span class="text-slate-300 font-sans">
Aug 31, 2025
</span>
</div>
<div class="flex justify-between">
<span class="text-slate-400 font-sans">
Duration:
</span>
<span class="text-slate-300 font-sans">
92 days
</span>
</div>
</div>
</div>
<!-- Budget & Spending -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">
Budget Control
</span>
<span class="rounded-md px-2 py-0.5 text-[10px] font-sans bg-blue-500/20 text-blue-400">
On Track
</span>
</div>
<div class="space-y-2">
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">
Daily Limit
</span>
<span class="text-slate-400 font-sans text-[10px]">
$850
</span>
</div>
<div class="h-2 bg-white/10 rounded-full overflow-hidden">
<div class="h-2 bg-blue-500 rounded-full" style="width: 68%"></div>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">
Total Budget
</span>
<span class="text-slate-400 font-sans text-[10px]">
$25,000
</span>
</div>
<div class="h-2 bg-white/10 rounded-full overflow-hidden">
<div class="h-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full" style="width: 74%"></div>
</div>
</div>
</div>
</div>
<!-- Performance Alerts -->
<div class="bg-white/5 rounded-lg p-3 space-y-2">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">Alerts</span>
<span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400 font-sans">
3
</span>
</div>
<div class="space-y-2 text-[11px]">
<div class="flex items-center gap-2 p-2 rounded border bg-blue-500/10 border-blue-500/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-3 h-3 flex-shrink-0 text-blue-400">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
<span class="text-slate-300 font-sans text-[10px]">
ROI exceeded target by 15%
</span>
</div>
<div class="flex items-center gap-2 p-2 bg-blue-500/10 rounded border border-blue-500/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-3 h-3 text-blue-400 flex-shrink-0">
<circle cx="12" cy="12" r="10" class=""></circle>
<line x1="12" x2="12" y1="8" y2="12" class=""></line>
<line x1="12" x2="12.01" y1="16" y2="16" class=""></line>
</svg>
<span class="text-slate-300 font-sans text-[10px]">
Peak engagement at 2-4PM
</span>
</div>
<div class="flex items-center gap-2 p-2 bg-orange-500/10 rounded border border-orange-500/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-3 h-3 text-orange-400 flex-shrink-0">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
class=""></path>
<line x1="12" x2="12" y1="9" y2="13" class=""></line>
<line x1="12" x2="12.01" y1="17" y2="17" class=""></line>
</svg>
<span class="text-slate-300 font-sans text-[10px]">
Budget 75% consumed
</span>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white/5 rounded-lg p-3 space-y-2">
<div class="mb-2 text-xs">
<span class="text-slate-300 font-sans">
Quick Actions
</span>
</div>
<div class="space-y-2 text-[10px]">
<div class="flex items-center justify-between">
<span class="text-slate-400 font-sans">
Auto-optimize
</span>
<button class="w-8 h-4 bg-blue-600 rounded-full relative">
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5 transition-transform"></div>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-slate-400 font-sans">
Email notifications
</span>
<button class="w-8 h-4 bg-blue-600 rounded-full relative">
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5 transition-transform"></div>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-slate-400 font-sans">
Pause on limit
</span>
<button class="w-8 h-4 bg-white/10 rounded-full relative">
<div class="w-3 h-3 bg-white rounded-full absolute left-0.5 top-0.5 transition-transform"></div>
</button>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-4 flex gap-2">
<button class="flex-1 hover:bg-blue-500 text-xs font-medium text-white bg-blue-600 rounded pt-2 pr-3 pb-2 pl-3">
Save Changes
</button>
<button class="px-3 py-2 bg-white/5 text-slate-300 rounded text-xs font-medium border border-white/10 hover:bg-white/10 font-sans">
Reset
</button>
</div>
</aside>
</div>
</div>
</div>