Скевоморфные значки
Компонент скевоморфных значков с отзывчивыми эффектами и поддержкой темных тем.
HTML-код
<span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-sm font-medium text-gray-800 shadow-md dark:bg-gray-700 dark:text-gray-200">
Badge
</span>
<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 shadow-inner dark:bg-red-900 dark:text-red-200">
Badge
</span>
<span class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900 dark:text-blue-200 dark:ring-blue-200/10">
Badge
</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full bg-green-100 text-sm font-medium text-green-800 shadow-lg dark:bg-green-800 dark:text-green-100">
<svg class="-ml-1 mr-1.5 h-2 w-2 text-green-400 dark:text-green-600" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Badge with dot
</span>Связанные компоненты
Компонент значков микровзаимодействий
Сложный, отзывчивый компонент бейджей в пастельных тонах, предназначенный для консалтинга/услуг, с микровзаимодействиями при наведении курсора и поддержкой темного режима. Каждый значок немного расширяется при наведении курсора, чтобы показать больше контекста.
Компонент «Финансовые бейджи»
Минималистичный и плоский дизайн компонента финансовых значков в океанских/голубых тонах, подходящий для финансовых и банковских интерфейсов. Он отличается отзывчивым дизайном и поддержкой темного режима.
Компонент "Значки" - Темный режим "Земляные тона"
Сложная система компонентов бейджей, разработанная в земляных тонах для темного режима блога и контентного интерфейса. Компонент включает в себя различные типы значков для категорий статей, статуса пользователя, тегов контента, уведомлений и показателей достижений. Все это с использованием натуральных цветов землистых тонов с поддержкой темного режима. Дизайн полностью адаптивный и адаптируется к разным размерам экрана.