Компонент «Бейджи»
Адаптивный компонент значков со стилем 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>Связанные компоненты
Компонент «Бейджи»
Отзывчивый компонент значка в темном режиме для электронной коммерции, демонстрирующий различные значки с дополнительными цветовыми схемами и интерактивными элементами.
Скевоморфные значки
Набор значков со скевоморфным дизайном, дополняющей цветовую гамму и простой версткой, подходит для блога или контентного сайта. Отзывчивый с поддержкой темного режима.
Компонент «Бейджи»
Отзывчивый компонент бейджей, выполненный в 3D-стиле с использованием земляных тонов, с интерактивными элементами, подходящими для приборной панели.