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
Social_Dating_Interactive_Component
Eine komplexe, interaktive Social-/Dating-Plattform-Komponente, die mit einem sauberen, vertrauenswürdigen Unternehmensstil unter Verwendung eines lila/violetten Farbschemas gestaltet wurde. Beinhaltet Unterstützung für responsives Layout und Dunkelmodus.
Komponente "Interaktive Komponenten"
Eine brutalistisch inspirierte interaktive Komponente für einen Blog mit kontrastreichen Erdtönen, responsivem Design und Unterstützung für den Dunkelmodus.
Komponente "Interaktive Komponenten"
Eine minimalistische, lebendige und einfache interaktive Komponente, die für Unterhaltungs- und Medienplattformen entwickelt wurde und über Wiedergabe-/Pausensteuerungen, einen Fortschrittsbalken und eine Lautstärkeregelung für Lautsprecher verfügt. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.