Components Interactive Components Interactive Components Component

Interactive Components Component

An interactive component designed in Brutalism style, suitable for showcasing work or products with dark theme support.

Preview

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.

Open

Interactive Components Component

Material Design Interactive Components Component with responsive effects and dark theme support.

Open

Neumorphism Interactive Components Component

Neumorphism Interactive Components Component for Business/Corporate websites

Open