Компонент «Бейджи»
Отзывчивый компонент значков, разработанный с микровзаимодействиями, с дополнительной цветовой схемой и поддержкой темных тем. Идеально подходит для деловых и корпоративных сайтов, этот компонент включает в себя увлекательные анимации, которые реагируют на действия пользователя. Ранее упомянутые визуальные подсказки, такие как эффекты наведения, улучшают пользовательский опыт.
HTML-код
<div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
<div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<span class="font-semibold">Marketing Team</span>
</div>
<p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
</div>
<div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<span class="font-semibold">Sales Team</span>
</div>
<p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
</div>
<div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<span class="font-semibold">Product Team</span>
</div>
<p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
</div>
<div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
<span class="font-semibold">Development Team</span>
</div>
<p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
</div>
</div>Связанные компоненты
Компонент «Бейджи»
Адаптивный компонент значков с микровзаимодействиями и поддержкой темных тем, разработанный с использованием Tailwind CSS. Этот компонент включает в себя эффекты наведения и использует изображения-заполнители для аватаров.
Скевоморфные значки
Компонент скевоморфных значков с отзывчивыми эффектами и поддержкой темных тем.
Компонент «Бейджи»
Компонент бейджей в стиле Neumorphism для блогов с аналогичной цветовой гаммой и богатым интерфейсом.