Компонент «Бейджи»
Простой компонент значков в стиле Glassmorphism для социальных сетей, с эффектами матового стекла с размытием, аналогичными цветами и поддержкой темного режима с использованием Tailwind CSS. Он адаптивный и использует picsum.photos для изображений и randomuser.me для аватаров, где это необходимо. JavaScript не включен.
HTML-код
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>Связанные компоненты
Компонент «Бейджи»
Компонент бейджей в стиле ретро с цветовой гаммой в оттенках серого, подходящий для блога или контентного сайта. Он оснащен несколькими интерактивными элементами и полной отзывчивостью, а также поддерживает темный режим. Дизайн избегает JavaScript, полагаясь исключительно на HTML и Tailwind CSS.
Компонент «Бейджи»
Простой, отзывчивый компонент бейджей с поддержкой темного режима, использующий триадическую цветовую схему, подходящую для портфолио.
Healthcare_Badges_Component_Bauhaus
Компонент значков на медицинскую тематику с дизайном, вдохновленным Баухаусом, в теплых тонах заката. Он отличается геометрическими формами и функциональным расположением, подходит для отображения статуса или категорий в медицинских приложениях. Отзывчивый с поддержкой темного режима.