Компонент «Бейджи»
Простой, отзывчивый компонент бейджей с поддержкой темного режима, использующий триадическую цветовую схему, подходящую для портфолио.
HTML-код
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
</div>
</div>
</div>Связанные компоненты
Компонент «Бейджи»
Элегантный и отзывчивый компонент значков для документации или вики-сайтов с цветовой гаммой в естественных тонах, роскошной типографикой и полной поддержкой темного режима.
РетроБейджи
Компонент ретро/винтажных бейджей для бизнес/корпоративных сайтов с дополнительной цветовой гаммой. Простая верстка, адаптивный дизайн с поддержкой темной темы. Нет JavaScript.
Компонент «Бейджи»
Адаптивный компонент значков с микровзаимодействиями и поддержкой темных тем, разработанный с использованием Tailwind CSS. Этот компонент включает в себя эффекты наведения и использует изображения-заполнители для аватаров.