Загрузка...
Карточка партнера в темном стиле Tailwind. Отображает статус, список партнеров с уровнями и статистику роста. Идеально для дашбордов и профилей.
<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 10% 0%, rgba(59,130,246,0.25), transparent 60%),
radial-gradient(280px 200px at 100% 100%, rgba(147,197,253,0.08), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<div class="flex items-start justify-between mb-4">
<div class="">
<h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Distinguish yourself</h3>
<p class="mt-2 text-sm sm:text-base text-gray-300">Elevate your brand with a golden tick and connect with top‑tier associates.</p>
</div>
<div class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-yellow-300/10 border border-yellow-300/20">
<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="crown" class="lucide lucide-crown w-3 h-3 text-yellow-300"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
<span class="text-xs font-medium text-yellow-300">Premium</span>
</div>
</div>
<div class="mt-4 rounded-lg bg-white/5 border border-white/10 p-3">
<div class="flex items-center justify-between mb-3">
<p class="text-sm font-medium">Verified Partners</p>
<span class="text-xs px-2 py-1 rounded-md bg-blue-500/10 border border-blue-400/20 text-blue-300">8 Active</span>
</div>
<div class="space-y-3">
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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.5 h-3.5"><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>
<div class="flex-1 min-w-0">
<span class="text-sm font-medium">LanderX</span>
<p class="text-xs text-gray-400">Design Systems • 2.4k followers</p>
</div>
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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.5 h-3.5 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>
<span class="text-xs text-yellow-300 font-medium">Gold</span>
</div>
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10">
<img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=80&auto=format&fit=crop" alt="Avatar" class="w-7 h-7 rounded-md object-cover ring-1 ring-white/10 flex-shrink-0">
<div class="flex-1 min-w-0">
<span class="text-sm font-medium">Robinson jr</span>
<p class="text-xs text-gray-400">Product Manager • 1.8k connections</p>
</div>
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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.5 h-3.5 text-blue-400 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>
<span class="text-xs text-blue-400 font-medium">Pro</span>
</div>
</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="rounded-lg bg-white/5 border border-white/10 p-3">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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-emerald-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
<span class="text-xs font-medium">Network Growth</span>
</div>
<p class="text-lg font-semibold text-emerald-400">+127%</p>
<p class="text-xs text-gray-400">vs last month</p>
</div>
<div class="rounded-lg bg-white/5 border border-white/10 p-3">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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-blue-400"><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>
<span class="text-xs font-medium">Active Partners</span>
</div>
<p class="text-lg font-semibold text-blue-400">24</p>
<p class="text-xs text-gray-400">verified connections</p>
</div>
</div>
</div>