Загрузка...

UI-карточка с градиентом и эффектом свечения. Темная тема, Tailwind CSS. Идеально для выделения фич на лендингах и дашбордах.
<div class="w-full max-w-xl h-[250px] z-[1] rounded-[10px] pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative"
style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d)">
<div class="aspect-square z-[2] w-[5px] rounded-full absolute bg-indigo-400"
style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
<div
class="z-[1] flex flex-col text-white w-full h-full border-[#202222] border rounded-[9px] pt-6 pr-6 pb-6 pl-6 relative items-center justify-center"
style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13))">
<div class="blur-[60px] transform opacity-40 w-[220px] h-[45px] rounded-full absolute top-0 left-0 rotate-[40deg]"
style="background-color: rgb(99, 102, 241); box-shadow: rgb(99, 102, 241) 0px 0px 50px; transform-origin: 10% center">
</div>
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20"
style="">
<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"
class="w-6 h-6 text-indigo-400" style="">
<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path>
<rect x="2" y="6" width="14" height="12" rx="2" class=""></rect>
</svg>
</div>
<h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">4K Video Output</h3>
<p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Generate stunning videos in up to 4K
resolution</p>
<div class="w-full h-[1px] absolute"
style="top: 10%; background: linear-gradient(90deg, rgb(99, 102, 241) 30%, rgb(29, 31, 31) 70%); mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent);">
</div>
<div class="w-[1px] h-full absolute"
style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%); mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent);">
</div>
<div class="bg-[#2c2c2c] w-full h-[1px] absolute"
style="bottom: 10%; mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent);">
</div>
<div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
</div>
</div>