Karten-Komponente
Eine reaktionsschnelle Portfoliokartenkomponente mit einem brutalistischen Designstil, der ein pastellfarbenes Farbschema und moderate Komplexität mit interaktiven Funktionen verwendet. Diese Karte präsentiert Arbeiten oder Produkte und unterstützt den Dunkelmodus.
HTML-Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Neumorphe Karten"
Eine reaktionsschnelle Kartenkomponente im Neumorphism-Stil mit Unterstützung für dunkle Themen, subtilen Schatten und flexiblem Layout.
Komponente "Glassmorphism-Karten"
Glassmorphism Cards Komponente mit leuchtenden Farben. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.