Загрузка...
Секция с интерактивными "таблетками" для выделения результатов обучения. Адаптивный дизайн, созданный с помощью Tailwind. Идеально для курсов и обзоров.
<div
class="spotlight-inner flex flex-col lg:flex-row lg:items-center bg-zinc-900/30 w-full border-zinc-100/50 rounded-none pt-8 pr-8 pb-8 pl-8 items-start justify-between">
<div class="absolute top-6 right-8">
<span class="font-mono text-sm font-bold text-white/10 tracking-widest font-geist">02</span>
</div>
<div class="max-w-md">
<h2 class="sm:text-3xl text-2xl text-white tracking-tighter font-geist mb-2">Find You'er Accounts</h2>
<p class="text-base font-light text-gray-400 font-geist">we have world collectoe, mega collector and normal
</p>
</div>
<div class="flex flex-wrap lg:justify-end max-w-2xl gap-x-3 gap-y-3 justify-start">
<div
class="group/pill flex hover:bg-zinc-200 hover:text-black transition-all cursor-pointer bg-white/5 border-white/10 border rounded-full pt-2.5 pr-4 pb-2.5 pl-4 gap-x-2 gap-y-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
style="width: 16px; height: 16px; color: rgb(234, 88, 12)" class="w-[16px] h-[16px]" aria-hidden="true"
role="img" data-icon="solar:code-file-bold-duotone" data-solar="star-bold-duotone" data-icon-set="solar"
data-icon-replaced="true" stroke-width="2">
<path fill="#ea580c"
d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z"
class=""></path>
<path fill="#ea580c"
d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408"
opacity=".5" class=""></path>
</svg>
<span class="text-sm font-medium font-geist">Premium accounts</span>
</div>
<div
class="group/pill flex hover:bg-zinc-200 hover:text-black transition-all cursor-pointer bg-white/5 border-white/10 border rounded-full pt-2.5 pr-4 pb-2.5 pl-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
style="color: rgb(163, 230, 53); width: 16px; height: 16px"
class="text-lime-400 bg-gradient-to-br from-white/10 to-white/0 w-[16px] h-[16px]" aria-hidden="true" role="img"
data-icon="solar:chat-round-line-bold-duotone" data-solar="pie-chart-2-bold-duotone" data-icon-set="solar"
data-icon-replaced="true" stroke-width="2">
<path fill="#a3e635"
d="M6.222 4.601a9.5 9.5 0 0 1 1.395-.771c1.372-.615 2.058-.922 2.97-.33c.913.59.913 1.56.913 3.5v1.5c0 1.886 0 2.828.586 3.414s1.528.586 3.414.586H17c1.94 0 2.91 0 3.5.912c.592.913.285 1.599-.33 2.97a9.5 9.5 0 0 1-10.523 5.435A9.5 9.5 0 0 1 6.222 4.601"
opacity=".5" class=""></path>
<path fill="#a3e635"
d="M21.446 7.069a8.03 8.03 0 0 0-4.515-4.515C15.389 1.947 14 3.344 14 5v4a1 1 0 0 0 1 1h4c1.657 0 3.053-1.39 2.446-2.931"
class=""></path>
</svg>
<span class="text-sm font-medium font-geist">Mega Collectors</span>
</div>
<div
class="group/pill flex hover:bg-zinc-200 hover:text-black transition-all cursor-pointer bg-white/5 border-white/10 border rounded-full pt-2.5 pr-4 pb-2.5 pl-4 gap-x-2 gap-y-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
style="width: 16px; height: 16px;" class="w-[16px] h-[16px] text-sky-500" aria-hidden="true" role="img"
data-icon="solar:server-square-bold-duotone" data-solar="widget-3-bold-duotone" data-icon-set="solar"
data-icon-replaced="true" stroke-width="2">
<g fill="#0891b2" fill-rule="evenodd" clip-rule="evenodd" class="">
<path
d="M22.25 6.5a4.75 4.75 0 1 0-9.5 0a4.75 4.75 0 0 0 9.5 0m-11 11a4.75 4.75 0 1 0-9.5 0a4.75 4.75 0 0 0 9.5 0"
class=""></path>
<path
d="M1.75 6.5a4.75 4.75 0 1 1 9.5 0a4.75 4.75 0 0 1-9.5 0m11 11a4.75 4.75 0 1 1 9.5 0a4.75 4.75 0 0 1-9.5 0"
opacity=".5" class=""></path>
</g>
</svg>
<span class="text-sm font-medium font-geist">Normal Accounts</span>
</div>
</div>
</div>