Бейджи Компонент 48
Компонент значков, разработанный в соответствии с принципами Material Design, с адаптивными макетами и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
</div>
</div>
</div>Связанные компоненты
Компонент «Бейджи»
Компонент нейроморфных значков с аналогичной цветовой схемой для блога/контентного сайта. Он отличается адаптивным дизайном и поддержкой темных тем, используя только HTML и Tailwind CSS.
Компонент "Значки" - Темный режим "Земляные тона"
Сложная система компонентов бейджей, разработанная в земляных тонах для темного режима блога и контентного интерфейса. Компонент включает в себя различные типы значков для категорий статей, статуса пользователя, тегов контента, уведомлений и показателей достижений. Все это с использованием натуральных цветов землистых тонов с поддержкой темного режима. Дизайн полностью адаптивный и адаптируется к разным размерам экрана.
Компонент «Бейджи»
Адаптивный компонент значков со стилем Material Design, поддержкой темных тем и цветовой схемой земляных тонов для содержимого блога.