Компонент «Бейджи»
Универсальный компонент значков, разработанный для бизнес-сайтов и корпоративных веб-сайтов, использующий тона земли в темном пользовательском интерфейсе для улучшения пользовательского опыта. Компонент отличается отзывчивостью с некоторыми интерактивными элементами.
HTML-код
<div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
<!-- Badge 1 -->
<div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Project Leader</span>
</div>
<!-- Badge 2 -->
<div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Senior Developer</span>
</div>
<!-- Badge 3 -->
<div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>UI/UX Designer</span>
</div>
<!-- Badge 4 -->
<div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Content Strategist</span>
</div>
</div>Связанные компоненты
Значки GradientSepiaBadges
Адаптивный компонент значка для музыки и аудио с градиентными переходами цвета сепии/коричневого цвета, подходящий для отображения жанров, настроений или категорий исполнителей. Включает поддержку темного режима.
Компонент «Бейджи»
Компонент значков - минималистичный/плоский дизайн с отзывчивыми эффектами и поддержкой темных тем. Никакого JavaScript, чистый HTML и CSS с Tailwind.
Компонент «Бейджи»
Отзывчивый компонент значков, разработанный с микровзаимодействиями, с дополнительной цветовой схемой и поддержкой темных тем. Идеально подходит для деловых и корпоративных сайтов, этот компонент включает в себя увлекательные анимации, которые реагируют на действия пользователя. Ранее упомянутые визуальные подсказки, такие как эффекты наведения, улучшают пользовательский опыт.