Badges-Komponente
Eine responsive Badges-Komponente mit 3D-Design und Unterstützung für Tiefe und dunkle Themen. Jedes Badge stellt einen Benutzer mit einem Namen, einem Bild und einer Beschreibung dar, die mit Tailwind CSS erstellt wurden.
HTML-Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
<!-- Badge 1 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
<p class="text-gray-600 dark:text-gray-400">Product Manager</p>
</div>
<!-- Badge 4 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
<p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
</div>
<!-- Badge 5 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
<p class="text-gray-600 dark:text-gray-400">Content Writer</p>
</div>
<!-- Badge 6 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>Verwandte Komponenten
Komponente "Microinteractions Badges"
Eine komplexe, reaktionsschnelle Badges-Komponente mit Pastellfarben, die für Beratung/Dienstleistungen entwickelt wurde, mit Hover-Mikrointeraktionen und Unterstützung für den Dunkelmodus. Jedes Abzeichen wird beim Bewegen des Mauszeigers leicht erweitert, um mehr Kontext anzuzeigen.
Badges-Komponente - Erdtöne im Dunkelmodus
Ein komplexes Badges-Komponentensystem, das mit Erdtönen für eine Blog-/Content-Schnittstelle im Dark-Modus entwickelt wurde. Die Komponente enthält verschiedene Badge-Typen für Artikelkategorien, Benutzerstatus, Inhalts-Tags, Benachrichtigungen und Erfolgsindikatoren. Alle in natürlichen Erdtönen mit Unterstützung für den Dunkelmodus. Das Design ist vollständig responsiv und passt sich verschiedenen Bildschirmgrößen an.
Badges-Komponente
Eine reaktionsschnelle Badge-Komponente im Dark-Modus für den E-Commerce, die verschiedene Badges mit komplementären Farbschemata und interaktiven Elementen präsentiert.