Компонент «Бейджи»
Отзывчивый компонент бейджей, выполненный в 3D-стиле с использованием земляных тонов, с интерактивными элементами, подходящими для приборной панели.
HTML-код
<div class="flex flex-wrap gap-4 p-5">
<!-- Badge 1 -->
<div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 1" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Users</h2>
<p class="text-gray-600 dark:text-gray-400">1500</p>
</div>
<!-- Badge 2 -->
<div class="bg-gradient-to-br from-brown-400 to-brown-500 dark:from-brown-600 dark:to-brown-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 2" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Signups</h2>
<p class="text-gray-600 dark:text-gray-400">300</p>
</div>
<!-- Badge 3 -->
<div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 3" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total Revenue</h2>
<p class="text-gray-600 dark:text-gray-400">$10,000</p>
</div>
<!-- Badge 4 -->
<div class="bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 4" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Feedback Received</h2>
<p class="text-gray-600 dark:text-gray-400">250</p>
</div>
</div>Связанные компоненты
Компонент «Бейджи»
Набор значков, вдохновленных Material Design, для приложений Technology/SaaS, отличающихся черно-белой цветовой схемой с акцентным цветом, адаптивным макетом и поддержкой темного режима.
Значки OrganicNatureInspiredBadges
Компонент значков средней сложности с плавными линиями, вдохновленными природой, и триадической цветовой гаммой, подходящий для портфолио для демонстрации работ или продуктов. Он включает в себя отзывчивость и поддержку темного режима.
Компонент "Значки" - Темный режим "Земляные тона"
Сложная система компонентов бейджей, разработанная в земляных тонах для темного режима блога и контентного интерфейса. Компонент включает в себя различные типы значков для категорий статей, статуса пользователя, тегов контента, уведомлений и показателей достижений. Все это с использованием натуральных цветов землистых тонов с поддержкой темного режима. Дизайн полностью адаптивный и адаптируется к разным размерам экрана.