Composante des composantes interactives
Un composant interactif conçu dans le style du brutalisme, adapté à la présentation d’œuvres ou de produits avec un support à thème sombre.
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>Composants associés
Composante des composantes interactives
Composant 3D interactif avec effets réactifs et prise en charge du thème sombre
Composante des composantes interactives
Un composant interactif de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre.
Composante des composantes interactives
Un composant interactif ludique et lumineux conçu pour les entreprises manufacturières/industrielles, avec une base en noir et blanc avec une couleur d’accent vibrante, des éléments arrondis et une esthétique conviviale.