All Prompts
All Prompts
cardinvoicedashboardtailwindresponsivetablefinancialinteractive
Responsive Invoice Details Card with Actions
Адаптивная карточка инвойса с деталями: клиент, суммы, статус, даты, позиции, баланс. Кнопки для платежей и напоминаний. UI для дашбордов, биллинга.
Prompt
<div class="grid gap-8 lg:grid-cols-12 xl:gap-10 border-0 rounded-3xl pt-4 pr-4 pb-4 pl-4 space-x-0">
<div class="lg:col-span-12 xl:col-span-12 scroll-animate fade-up visible">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-4xl sm:text-5xl font-light tracking-tight text-white font-bricolage mb-6">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-emerald-400">Invoice</span>
management
</h2>
<p class="text-xl text-gray-300 font-geist font-light scroll-animate fade-up delay-200 visible">Real-time invoice
tracking with comprehensive financial insights and automated payment workflows.</p>
<div
class="inline-flex items-center gap-2 rounded-xl border border-blue-400/20 bg-blue-400/10 px-3 py-2 mt-4 scroll-animate scale-in delay-300 visible">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-300">
<path d="M12 8V4H8" class=""></path>
<rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
<path d="M2 14h2" class=""></path>
<path d="M20 14h2" class=""></path>
<path d="M15 13v2" class=""></path>
<path d="M9 13v2" class=""></path>
</svg>
<span class="text-sm text-blue-200 font-geist">Live demo</span>
</div>
</div>
<article
class="overflow-hidden hover:border-white/40 transition-all duration-300 h-auto min-h-fit bg-gradient-to-br from-blue-900/20 to-black border border-blue-400/20 rounded-2xl shadow-sm backdrop-blur-xl scroll-animate slide-up delay-400 visible">
<header class="flex items-center justify-between p-8 border-b border-blue-400/20">
<div class="flex items-center space-x-3">
<div class="h-12 w-12 rounded-xl bg-blue-500/15 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="file-text" class="lucide lucide-file-text h-5 w-5 text-blue-300">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
<path d="M10 9H8" class=""></path>
<path d="M16 13H8" class=""></path>
<path d="M16 17H8" class=""></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white font-geist">Invoice Details</h3>
</div>
<span class="inline-flex items-center rounded-lg bg-amber-500/15 px-3 py-1 text-xs font-medium text-amber-200 font-geist border border-amber-400/20">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock mr-1 h-3 w-3"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
Pending
</span>
</header>
<div class="pt-8 pr-8 pb-8 pl-8 space-y-6">
<div class="flex items-start justify-between">
<div class="">
<div class="flex items-center space-x-3 mb-2">
<span class="inline-flex items-center rounded-lg bg-blue-500/15 px-3 py-1 text-sm font-semibold text-blue-200 font-geist border border-blue-400/20">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="hash" class="lucide lucide-hash mr-1 h-3 w-3"><line x1="4" x2="20" y1="9" y2="9" class=""></line><line x1="4" x2="20" y1="15" y2="15" class=""></line><line x1="10" x2="8" y1="3" y2="21" class=""></line><line x1="16" x2="14" y1="3" y2="21" class=""></line></svg>
INV-2024-0342
</span>
<span class="text-sm text-gray-300 font-geist">Due: March 15, 2024</span>
</div>
<h4 class="text-xl font-semibold text-white mb-1 font-geist">TechFlow Solutions Ltd</h4>
<p class="text-sm text-gray-300 font-geist font-light">Web Development & Consulting Services</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-300 mb-1 font-geist">Total Amount</p>
<p class="text-3xl text-white font-bricolage font-light">$12,450</p>
<p class="text-sm text-gray-400 font-geist">USD</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="rounded-xl bg-gradient-to-br from-blue-900/30 to-black/50 p-4 border border-blue-400/30">
<div class="flex items-center space-x-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="calendar" class="lucide lucide-calendar h-4 w-4 text-blue-300">
<path d="M8 2v4" class=""></path>
<path d="M16 2v4" class=""></path>
<rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
<path d="M3 10h18" class=""></path>
</svg>
<span class="text-sm font-medium text-blue-200 font-geist">Issue date</span>
</div>
<p class="text-base text-white font-geist">Mar 1, 2024</p>
<p class="text-xs text-gray-400 font-geist">Net 15</p>
</div>
<div class="rounded-xl bg-gradient-to-br from-emerald-900/30 to-black/50 p-4 border border-emerald-400/30">
<div class="flex items-center space-x-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="wallet" class="lucide lucide-wallet h-4 w-4 text-emerald-300">
<path
d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path>
</svg>
<span class="text-sm font-medium text-emerald-200 font-geist">Balance due</span>
</div>
<p class="text-base text-white font-geist">$4,250</p>
<p class="text-xs text-emerald-300 font-geist">$8,200 paid</p>
</div>
<div class="rounded-xl bg-gradient-to-br from-purple-900/30 to-black/50 p-4 border border-purple-400/30">
<div class="flex items-center space-x-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4 text-purple-300">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<span class="text-sm font-medium text-purple-200 font-geist">Payment terms</span>
</div>
<p class="text-base text-white font-geist">Net 15</p>
<p class="text-xs text-gray-400 font-geist">1.5% late fee</p>
</div>
</div>
<div
class="overflow-x-auto rounded-xl border border-blue-400/20 bg-gradient-to-br from-blue-900/20 to-black/60">
<table class="min-w-full divide-y divide-blue-400/20">
<thead class="bg-gradient-to-br from-blue-900/30 to-black/60">
<tr class="">
<th scope="col"
class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-blue-200 font-geist">
Item</th>
<th scope="col"
class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-blue-200 font-geist">
Qty</th>
<th scope="col"
class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-blue-200 font-geist">
Rate</th>
<th scope="col"
class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-blue-200 font-geist">
Amount</th>
</tr>
</thead>
<tbody class="divide-y divide-blue-400/20">
<tr class="hover:bg-blue-900/20 transition">
<td class="px-6 py-4">
<p class="text-sm text-white font-geist">Frontend Development</p>
<p class="text-xs text-gray-400 font-geist">React components & UI integration</p>
</td>
<td class="px-6 py-4 text-right text-sm text-gray-200 font-geist">64</td>
<td class="px-6 py-4 text-right text-sm text-gray-200 font-geist">$120.00</td>
<td class="px-6 py-4 text-right text-sm text-white font-geist">$7,680.00</td>
</tr>
<tr class="hover:bg-blue-900/20 transition">
<td class="px-6 py-4">
<p class="text-sm text-white font-geist">Backend API</p>
<p class="text-xs text-gray-400 font-geist">Node services & integrations</p>
</td>
<td class="px-6 py-4 text-right text-sm text-gray-200 font-geist">28</td>
<td class="px-6 py-4 text-right text-sm text-gray-200 font-geist">$135.00</td>
<td class="px-6 py-4 text-right text-sm text-white font-geist">$3,780.00</td>
</tr>
<tr class="hover:bg-blue-900/20 transition">
<td class="px-6 py-4">
<p class="text-sm text-white font-geist">Cloud Hosting</p>
<p class="text-xs text-gray-400 font-geist">Production & staging resources</p>
</td>
<td class="px-6 py-4 text-right text-sm text-gray-200 font-geist">1</td>
<td class="px-6 py-4 text-right text-sm text-gray-200 font-geist">$990.00</td>
<td class="px-6 py-4 text-right text-sm text-white font-geist">$990.00</td>
</tr>
</tbody>
</table>
</div>
<div class="flex flex-wrap items-center gap-3">
<button class="inline-flex hover:bg-blue-600 transition shadow-blue-900/30 text-sm text-white bg-gradient-to-r from-blue-400 to-emerald-400 rounded-xl pt-3 pr-6 pb-3 pl-6 shadow-lg space-x-2 items-center font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
<span class="font-geist">Record Payment</span>
</button>
<button class="inline-flex items-center space-x-2 rounded-xl border border-blue-400/20 bg-gradient-to-br from-blue-900/20 to-black/40 px-6 py-3 text-sm text-blue-100 hover:bg-blue-900/30 hover:border-blue-400/30 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
<span class="font-geist font-medium">Send Reminder</span>
</button>
</div>
<div
class="rounded-xl border border-amber-400/20 bg-gradient-to-br from-amber-900/20 to-black/40 p-6 flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bell-ring" class="lucide lucide-bell-ring h-4 w-4 text-amber-300 mt-0.5">
<path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path>
<path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path>
<path
d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
class=""></path>
<path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path>
</svg>
<p class="text-sm text-amber-100 font-geist font-light">
Auto-reminder scheduled 3 days before due date. You can adjust reminders in Settings.
</p>
</div>
</div>
</article>
</div>
</div>