Пастельные значки Темный режим Пользовательский интерфейс
Простой, адаптивный компонент значков для бизнес-сайтов с пользовательским интерфейсом темного режима в пастельных тонах. Разработанный с использованием Tailwind CSS, он использует темный фон для снижения нагрузки на глаза и поддерживает адаптивный макет.
HTML-код
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
<span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
Business
</span>
<span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
Corporate
</span>
<span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
Innovation
</span>
<span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
Strategy
</span>
<span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
Growth
</span>
</div>Связанные компоненты
Компонент "Значки" - Темный режим "Земляные тона"
Сложная система компонентов бейджей, разработанная в земляных тонах для темного режима блога и контентного интерфейса. Компонент включает в себя различные типы значков для категорий статей, статуса пользователя, тегов контента, уведомлений и показателей достижений. Все это с использованием натуральных цветов землистых тонов с поддержкой темного режима. Дизайн полностью адаптивный и адаптируется к разным размерам экрана.
Компонент «Бейджи»
Набор значков, вдохновленных Material Design, для приложений Technology/SaaS, отличающихся черно-белой цветовой схемой с акцентным цветом, адаптивным макетом и поддержкой темного режима.
Компонент «Бейджи»
Простой компонент значков в стиле Glassmorphism для социальных сетей, с эффектами матового стекла с размытием, аналогичными цветами и поддержкой темного режима с использованием Tailwind CSS. Он адаптивный и использует picsum.photos для изображений и randomuser.me для аватаров, где это необходимо. JavaScript не включен.