Загрузка...

Карточка с иконкой, заголовком и изображением. Tailwind CSS. Отлично подходит для демонстрации преимуществ продукта на сайте.
<div class="group relative transition hover:border-white/20 text-zinc-200 bg-zinc-900/50 border-white/10 border rounded-lg shadow-sm max-w-xl">
<!-- CardDecorator -->
<span class="border-sky-500 absolute -left-px -top-px block size-2 border-l-2 border-t-2"></span>
<span class="border-sky-500 absolute -right-px -top-px block size-2 border-r-2 border-t-2"></span>
<span class="border-sky-500 absolute -bottom-px -left-px block size-2 border-b-2 border-l-2"></span>
<span class="border-sky-500 absolute -bottom-px -right-px block size-2 border-b-2 border-r-2"></span>
<!-- CardHeader -->
<div class="pt-6 pr-6 pb-6 pl-6">
<span class="text-zinc-400 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check size-4"><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">Enterprise Security</span>
</span>
<p class="mt-4 text-2xl font-semibold tracking-tight text-white/95">Bank-grade encryption keeps your data secure and compliant.</p>
</div>
<!-- Content -->
<div class="relative border-dashed border-white/10 border-t">
<div class="absolute inset-0 pointer-events-none bg-[radial-gradient(125%_125%_at_50%_0%,transparent_40%,rgba(255,255,255,0.06)_100%)]"></div>
<div class="aspect-[4/3] pt-6 pr-6 pb-6 pl-6">
<div class="h-full w-full overflow-hidden rounded-md border border-white/10 bg-zinc-900/40">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/418aea1a-acf9-4e4b-85e1-d508425e9cc6_1600w.jpg" alt="security dashboard" width="1207" height="929" class="h-full w-full object-cover" style="">
</div>
</div>
</div>
</div>