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