Компонент «Бейджи»
Отзывчивый компонент значков, выполненный в стиле стекломорфизма, с полупрозрачными элементами, похожими на матовое стекло, и эффектами размытия, с поддержкой темного режима.
HTML-код
<div class="flex flex-wrap justify-center space-x-4 mt-10">
<!-- Badge 1 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
<p class="text-gray-500 dark:text-gray-400">UX Designer</p>
</div>
<!-- Badge 4 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
<p class="text-gray-500 dark:text-gray-400">Product Manager</p>
</div>
</div>Связанные компоненты
Компонент «Бейджи»
Универсальный компонент значков, разработанный для бизнес-сайтов и корпоративных веб-сайтов, использующий тона земли в темном пользовательском интерфейсе для улучшения пользовательского опыта. Компонент отличается отзывчивостью с некоторыми интерактивными элементами.
Компонент «Бейджи»
Адаптивный компонент значков со стилем скевоморфизма, триадической цветовой схемой и простой сложностью, предназначенный для портфолио с поддержкой темных тем.
РетроБейджи
Компонент ретро/винтажных бейджей для бизнес/корпоративных сайтов с дополнительной цветовой гаммой. Простая верстка, адаптивный дизайн с поддержкой темной темы. Нет JavaScript.