Komponente "Interaktive Komponenten"
Eine interaktive Komponente, die im Brutalismus-Stil gestaltet ist und sich für die Präsentation von Arbeiten oder Produkten mit Unterstützung dunkler Themen eignet.
HTML-Code
<div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg"> <h1 class="text-3xl font-bold mb-6">My Portfolio</h1> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-700 p-4 rounded-lg"> <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Project 1"> <h2 class="text-xl font-semibold mt-2">Project Title 1</h2> <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p> <div class="mt-4 flex justify-between items-center"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> <a href="#" class="text-blue-400 hover:underline">View More</a> </div> </div> <div class="bg-gray-700 p-4 rounded-lg"> <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Project 2"> <h2 class="text-xl font-semibold mt-2">Project Title 2</h2> <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p> <div class="mt-4 flex justify-between items-center"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"> <a href="#" class="text-blue-400 hover:underline">View More</a> </div> </div> <div class="bg-gray-700 p-4 rounded-lg"> <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Project 3"> <h2 class="text-xl font-semibold mt-2">Project Title 3</h2> <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p> <div class="mt-4 flex justify-between items-center"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"> <a href="#" class="text-blue-400 hover:underline">View More</a> </div> </div> </div> <div class="mt-8 text-center"> <button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500">Load More Projects</button> </div></div>Verwandte Komponenten
Brutalistische Produktkarte
Eine einfache interaktive Produktkartenkomponente für den E-Commerce mit einem brutalistischen Design in Graustufen. Es verfügt über ein Produktbild, einen Titel, einen Preis und eine Schaltfläche "In den Warenkorb". Die Komponente reagiert und unterstützt den Dunkelmodus. Hover-Effekte sind für die Interaktivität enthalten.
Einfache Dashboard-Komponente
Einfache, reaktionsschnelle Dashboard-Komponente mit Material Design-Prinzipien und lebendigem Farbschema.
Komponente "Interaktive Komponenten"
Eine komplexe interaktive Komponente für soziale Medien mit skeuomorphem Design und monochromatischem Farbschema.