Компонент бейджей - 3D-аналог приборной панели
Адаптивный компонент Badges с 3D-дизайном, аналогичной цветовой схемой, умеренной сложностью и поддержкой темных тем для дашбордов. Использует только классы CSS Tailwind.
HTML-код
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<!-- Badge 1 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Completed
</span>
<!-- Badge 2 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
Failed
</span>
<!-- Badge 3 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Pending
</span>
<!-- Badge 4 - Example with icon and no text -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</span>
</div>Связанные компоненты
Healthcare_Badges_Component_Bauhaus
Компонент значков на медицинскую тематику с дизайном, вдохновленным Баухаусом, в теплых тонах заката. Он отличается геометрическими формами и функциональным расположением, подходит для отображения статуса или категорий в медицинских приложениях. Отзывчивый с поддержкой темного режима.
Компонент «Бейджи»
Отзывчивый компонент бейджей, выполненный в 3D-стиле с использованием земляных тонов, с интерактивными элементами, подходящими для приборной панели.
Компонент значков микровзаимодействий
Сложный, отзывчивый компонент бейджей в пастельных тонах, предназначенный для консалтинга/услуг, с микровзаимодействиями при наведении курсора и поддержкой темного режима. Каждый значок немного расширяется при наведении курсора, чтобы показать больше контекста.