Компонент «Бейджи»
Компонент значков - минималистичный/плоский дизайн с отзывчивыми эффектами и поддержкой темных тем. Никакого JavaScript, чистый HTML и CSS с Tailwind.
HTML-код
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Dot Badge with long text that should wrap or truncate
</span>Связанные компоненты
Компонент «Бейджи»
Компонент бейджей в стиле ретро с цветовой гаммой в оттенках серого, подходящий для блога или контентного сайта. Он оснащен несколькими интерактивными элементами и полной отзывчивостью, а также поддерживает темный режим. Дизайн избегает JavaScript, полагаясь исключительно на HTML и Tailwind CSS.
Компонент бейджей - 3D-аналог приборной панели
Адаптивный компонент Badges с 3D-дизайном, аналогичной цветовой схемой, умеренной сложностью и поддержкой темных тем для дашбордов. Использует только классы CSS Tailwind.
Компонент «Бейджи»
Универсальный компонент значков, разработанный для бизнес-сайтов и корпоративных веб-сайтов, использующий тона земли в темном пользовательском интерфейсе для улучшения пользовательского опыта. Компонент отличается отзывчивостью с некоторыми интерактивными элементами.