Загрузка...
Карточка "Boost Sales" на Tailwind CSS с градиентом. Отображает метрики, заголовки и описания. Идеальна для SaaS-дашбордов и лендингов.
<div class="relative overflow-hidden bg-black/40 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6">
<div class="absolute inset-0 pointer-events-none" style="background:
radial-gradient(220px 160px at 100% 100%, rgba(45,212,191,0.25), transparent 60%),
radial-gradient(260px 180px at 0% 0%, rgba(56,189,248,0.08), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Boost Sales</h3>
<p class="mt-2 text-sm sm:text-base text-gray-300">Convert more leads with targeted strategies and smarter tools.</p>
<div class="mt-5 rounded-xl bg-white/5 border border-white/10 p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs mb-4">
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chart-bar" class="lucide lucide-chart-bar w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M7 16h8" class=""></path><path d="M7 11h12" class=""></path><path d="M7 6h3" class=""></path></svg>
Monthly Visits
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
Last 24hrs
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
Retention
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
Top Referrals
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="percent" class="lucide lucide-percent w-3.5 h-3.5 text-gray-300 flex-shrink-0"><line x1="19" x2="5" y1="5" y2="19" class=""></line><circle cx="6.5" cy="6.5" r="2.5" class=""></circle><circle cx="17.5" cy="17.5" r="2.5" class=""></circle></svg>
% Conversion
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
Grow Income
</div>
</div>
<div class="flex flex-wrap items-center gap-2">
<div class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
<span class="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-3 h-3"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
</span>
<span class="text-[11px] font-medium">LanderX</span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3 h-3 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</div>
<div class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
<span class="inline-flex h-6 w-6 items-center justify-center rounded bg-pink-500/20 ring-1 ring-white/10 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="gem" class="lucide lucide-gem w-3 h-3"><path d="M10.5 3 8 9l4 13 4-13-2.5-6" class=""></path><path d="M17 3a2 2 0 0 1 1.6.8l3 4a2 2 0 0 1 .013 2.382l-7.99 10.986a2 2 0 0 1-3.247 0l-7.99-10.986A2 2 0 0 1 2.4 7.8l2.998-3.997A2 2 0 0 1 7 3z" class=""></path><path d="M2 9h20" class=""></path></svg>
</span>
<span class="text-[11px] font-medium">Crystal</span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3 h-3 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</div>
</div>
</div>
</div>