Компоненты Значки Компонент «Бейджи»

Компонент «Бейджи»

Адаптивный компонент значков с увлекательными микровзаимодействиями, разработанный с использованием Tailwind CSS. Поддерживает темный режим и включает заполнители изображений.

Предварительный просмотр

HTML-код

<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="relative inline-block">
        <img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
    </div>
</div>

<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937; /* Gray-800 */
    }
    .text-white {
        color: #f9fafb; /* Gray-100 */
    }
}
</style>

Связанные компоненты

Компонент «Бейджи»

Компонент бейджей в стиле ретро с цветовой гаммой в оттенках серого, подходящий для блога или контентного сайта. Он оснащен несколькими интерактивными элементами и полной отзывчивостью, а также поддерживает темный режим. Дизайн избегает JavaScript, полагаясь исключительно на HTML и Tailwind CSS.

Открытый

Компонент "Значки" - Темный режим "Земляные тона"

Сложная система компонентов бейджей, разработанная в земляных тонах для темного режима блога и контентного интерфейса. Компонент включает в себя различные типы значков для категорий статей, статуса пользователя, тегов контента, уведомлений и показателей достижений. Все это с использованием натуральных цветов землистых тонов с поддержкой темного режима. Дизайн полностью адаптивный и адаптируется к разным размерам экрана.

Открытый

Компонент «Бейджи»

Компонент нейроморфных значков с аналогичной цветовой схемой для блога/контентного сайта. Он отличается адаптивным дизайном и поддержкой темных тем, используя только HTML и Tailwind CSS.

Открытый