cardbadgelabeluidecorativeminimaltailwindlabelbadgebox

Label Badge with Decorative Corner Icons

Метка-бейджик с иконками по углам. Компактный UI-компонент для выделения аудитории, категорий или статусов. Стилизован утилитарными классами.

Live Preview

Prompt

<div
  class="flex uppercase text-xs font-medium text-gray-600 tracking-[0.08em] w-fit border-gray-400 border mt-16 mr-auto ml-auto pt-2 pr-5 pb-2 pl-5 relative items-center justify-center">
  <div class="z-10 relative">Für AI-native Founder</div>
  <div class="absolute inset-0 pointer-events-none">
    <div
      class="absolute w-[18px] h-[18px] -top-[9px] -left-[9px] bg-[#F4F4EE] text-black flex items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2.5" class="">
        <path d="M2 12h20" class=""></path>
        <path d="M12 2v20" class=""></path>
      </svg>
    </div>
    <div
      class="absolute w-[18px] h-[18px] -bottom-[9px] -right-[9px] bg-[#F4F4EE] text-black flex items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2.5" class="">
        <path d="M2 12h20" class=""></path>
        <path d="M12 2v20" class=""></path>
      </svg>
    </div>
  </div>
</div>

All Prompts