Компонент «Бейджи»
Адаптивный компонент значков со стилем Material Design, поддержкой темных тем и цветовой схемой земляных тонов для содержимого блога.
HTML-код
<div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
<div class="m-4">
<div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Author: John Doe</span>
</div>
</div>
<div class="m-4">
<div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Category: Nature</span>
</div>
</div>
<div class="m-4">
<div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Tag: Environment</span>
</div>
</div>
<div class="m-4">
<div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Contributor: Jane Smith</span>
</div>
</div>
</div>Связанные компоненты
Компонент «Бейджи»
Отзывчивый компонент значков, разработанный с микровзаимодействиями, с дополнительной цветовой схемой и поддержкой темных тем. Идеально подходит для деловых и корпоративных сайтов, этот компонент включает в себя увлекательные анимации, которые реагируют на действия пользователя. Ранее упомянутые визуальные подсказки, такие как эффекты наведения, улучшают пользовательский опыт.
Компонент «Бейджи»
Адаптивный компонент значков с увлекательными микровзаимодействиями, разработанный с использованием Tailwind CSS. Поддерживает темный режим и включает заполнители изображений.
Компонент «Бейджи»
Компонент бейджей в стиле Neumorphism для блогов с аналогичной цветовой гаммой и богатым интерфейсом.