Interactive Components Component
An interactive component designed in Brutalism style, suitable for showcasing work or products with dark theme support.
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>
Related Components
Interactive Components Component
A social media interactive component with a pastel color scheme, moderate complexity, responsive design, and dark mode support, built with Tailwind CSS and following Material Design principles. It uses dummy images from picsum.photos and avatars from randomuser.me.
Interactive Components Component
Material Design Interactive Components Component with responsive effects and dark theme support.
Neumorphism Interactive Components Component
Neumorphism Interactive Components Component for Business/Corporate websites