Search Components

Interactive Components

Components that enable user interaction and input

Interactive Components Component

A complex e-commerce product card with 3D design elements, using a triadic color scheme, designed for interactive online shopping experiences with responsive and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 p-4 min-h-screen flex items-center justify-center dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950">
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 relative z-10 animate-fade-in-down dark:text-gray-100">
      <span class="block">Explore Our <span class="text-indigo-600 dark:text-indigo-400">Collection</span></span>
      <span class="block text-2xl md:text-3xl text-purple-600 dark:text-purple-400 mt-2">Experience 3D Depth</span>
      <div class="absolute inset-0 flex items-center justify-center -z-10">
        <div class="w-32 h-32 md:w-48 md:h-48 bg-purple-200 dark:bg-purple-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-slow"></div>
        <div class="w-48 h-48 md:w-64 md:h-64 bg-indigo-200 dark:bg-indigo-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-reverse-slow"></div>
      </div>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/157/400/300" alt="Elegant Watch" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute top-3 right-3 text-sm px-3 py-1 bg-purple-600 text-white rounded-full font-semibold shadow-md">New Arrival</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">AstroPulse Watch</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Precision, Elegance, Future.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400">$299</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$349</p>
            </div>
            <button class="w-full py-3 px-6 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Crafted with aerospace-grade sapphire glass and a sustainable recycled titanium casing.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Water Resistance: 100m</li>
              <li>Battery Life: 30 days</li>
              <li>Smart Notifications</li>
              <li>Eco-Friendly Materials</li>
            </ul>
            <button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Customize Now
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-pink-600 dark:from-indigo-700 dark:to-pink-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/29/400/300" alt="Wireless Headphones" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute top-3 left-3 text-sm px-3 py-1 bg-indigo-600 text-white rounded-full font-semibold shadow-md">Limited Offer</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">SonicWave Headphones</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Immersive Sound, Unrivaled Comfort.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$189</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$220</p>
            </div>
            <button class="w-full py-3 px-6 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 dark:bg-indigo-800 dark:hover:bg-indigo-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Experience crystal-clear audio with adaptive noise cancellation and 40-hour battery life.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Noise Cancellation: Adaptive</li>
              <li>Battery Life: 40 hours</li>
              <li>Ergonomic Design</li>
              <li>Bluetooth 5.2</li>
            </ul>
            <button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Read Reviews
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-pink-500/50 dark:hover:shadow-pink-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/27/400/300" alt="Smart Speaker" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute bottom-3 right-3 text-sm px-3 py-1 bg-pink-600 text-white rounded-full font-semibold shadow-md">Best Seller</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">EchoSphere Speaker</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Intelligent Audio, Seamless Integration.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$129</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$150</p>
            </div>
            <button class="w-full py-3 px-6 bg-pink-600 text-white rounded-lg hover:bg-pink-700 dark:bg-pink-800 dark:hover:bg-pink-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Your smart home hub with voice assistant integration and 360-degree sound.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Voice Assistant: AI Powered</li>
              <li>Audio: 360° Omnidirectional</li>
              <li>Smart Home Integration</li>
              <li>Multi-room Audio</li>
            </ul>
            <button class="w-full py-3 px-6 bg-purple-500 text-white rounded-lg hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Explore Features
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Base styles for the 3D card */
  .perspective-1000 {
    perspective: 1000px;
  }

  .card-3d-container {
    position: relative;
    width: 100%;
    height: 100%; /* Ensure container has height for children */
    display: flex; /* Make it a flex container to center child */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 480px; /* Minimum height for cards */
  }

  .card-3d {
    position: relative;
    width: 100%;
    height: auto; /* Adjust height based on content */
    min-height: 480px; /* Ensure a consistent minimum height */
    transform-origin: center center; /* Ensure consistent rotation origin */
  }

  /* Front and back faces */
  .backface-hidden {
    backface-visibility: hidden;
  }

  .card-front,
  .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
  }

  .card-back {
    transform: rotateY(180deg);
  }

  /* Flip effect on hover */
  .card-3d-container:hover .card-3d {
    transform: rotateY(180deg);
  }

  /* Inner shadow effect for image */
  .shadow-inner-lg {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 6px 0 rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-inner-lg {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 6px 0 rgba(0, 0, 0, 0.15);
  }

  /* Custom animations */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 1s ease-out forwards;
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin-slow {
    animation: spin-slow 15s linear infinite;
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }

  .animate-spin-reverse-slow {
    animation: spin-reverse-slow 20s linear infinite;
  }

  /* Responsive adjustments for overall layout */
  @media (max-width: 767px) {
    .card-3d-container {
      min-height: 450px; /* Slightly reduce min-height for mobile */
    }
    .card-3d {
      min-height: 450px;
    }
    .card-front h3, .card-back h3 {
      font-size: 1.75rem; /* Equivalent to text-2xl */
    }
    .card-front p, .card-back p {
      font-size: 0.875rem; /* Equivalent to text-sm */
    }
    .card-front span.text-3xl {
      font-size: 2rem; /* Reduce price size slightly */
    }
  }

</style>

Retro Vintage Portfolio Interactive Components

A grayscale, retro-vintage themed portfolio component with interactive elements, suitable for showcasing work or products. Features responsive design and dark mode support.

Open Preview

                <div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8">

  <!-- Header/Title -->
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 md:mb-12 text-center leading-tight tracking-wider uppercase drop-shadow-md text-gray-900 dark:text-gray-100" style="text-shadow: 2px 2px 0px #000, -2px -2px 0px #333;">
    _PORTFOLIO_:
    <span class="block text-2xl sm:text-3xl md:text-4xl font-normal mt-2 lowercase text-gray-700 dark:text-gray-300">[PROJECTS & WORKS]</span>
  </h1>

  <!-- Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto w-full">

    <!-- Project Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/67/400/300" alt="Project 1" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Project Alpha</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">A ground-breaking application designed to revolutionize user interaction with its intuitive interface and robust backend.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2023]</div>
    </div>

    <!-- Project Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/68/400/300" alt="Project 2" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Cyber-Connect</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">A secure communication platform emphasizing data privacy and end-to-end encryption for seamless messaging.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2022]</div>
    </div>

    <!-- Project Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/69/400/300" alt="Project 3" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Bio-Synth AI</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">An advanced AI system capable of synthesizing complex biological data for research and development purposes.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2021]</div>
    </div>

    <!-- Profile Card/About me -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="Developer Avatar" class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 object-cover filter grayscale group-hover:grayscale-0 transition-all duration-300 shadow-md">
        <div class="text-center sm:text-left">
          <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 uppercase tracking-wide">Dev. Smith</h2>
          <p class="text-gray-700 dark:text-gray-300 text-lg font-semibold">[FRONTEND ENGINEER]</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Dedicated to crafting robust and visually striking web experiences. Specializing in responsive design and accessible user interfaces. Always pushing the boundaries of digital creation.</p>
      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">HTML5</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">CSS3</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">Tailwind CSS</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">JS</span>
      </div>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">CONTACT</span>
      </button>
    </div>

  </div>

</div>

Brutalist Product Card

A simple interactive product card component for e-commerce, with a Brutalist design in grayscale. It features a product image, title, price, and an 'Add to Cart' button. The component is responsive and supports dark mode. Hover effects are included for interactivity.

Open Preview

                <div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
  <div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <div class="overflow-hidden border-b-2 border-black dark:border-white">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
    </div>
    <div class="p-4 relative">
      <h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
      <p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
        <button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
      </div>
    </div>
    <div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
  </div>
</div>

Interactive Components

A web component designed with skeuomorphic elements for social media interfaces featuring a complementary color scheme and dark theme support.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
    <div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
    <div class="flex-1">
        <h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
        <p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
        <p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
        <img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
            <button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
            <button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
    </div>
</div>

Interactive Components Component

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

Open Preview

                <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>

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 Preview

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-lg">John Doe</div>
  </div>
  <img class="w-full h-64 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum/800/400" alt="Post Image">
  <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample social media post with a pastel color scheme and Material Design styling.</p>
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.644 0-1.25-.302-1.63-0.8L10 14V10m4 0H5a2 2 0 00-2 2v6a2 2 0 002 2h10l2.293 2.293c.032.032.07.05.107.05h.1l.1-.147l.145-.194-.013-.014L17 21.5l.354-.354.353.354z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815F7.001 16.88C18.745 10.65 7.544 10.5 21 12z"></path></svg>
      <span>35 Comments</span>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <input type="text" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Add a comment...">
    <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Post</button>
  </div>
</div>

Interactive Components Component

A brutalist-inspired interactive component for a blog, featuring high contrast earth tones, responsive design, and dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">

  <!-- Article Card with Brutalist Elements -->
  <div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
    <div class="p-6 border-b-4 border-black dark:border-white">
      <div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
      <h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
      <img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <p class="mb-4">
        Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
        unadorned surfaces evoke a sense of permanence and honesty.
      </p>
      <a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
        Read More
      </a>
    </div>

    <!-- Related Articles Section -->
    <div class="p-6 border-b-4 border-black dark:border-white">
      <h3 class="text-2xl font-bold mb-4">More to Explore</h3>
      <ul>
        <li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
          <a href="#" class="block hover:underline">
            <h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
            <p class="text-sm text-stone-700 dark:text-stone-300">An analysis of Brutalism

Interactive Components Component

Interactive Components Component with Material Design, Triadic color scheme, Complex complexity, for E-commerce, with responsive design and dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-4">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
          </div>
        </div>
      </div>
      
       <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Simple Dashboard Component

Simple, responsive dashboard component with Material Design principles and vibrant color scheme.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-blue-600 dark:text-blue-400">$12,345</p>
        <span class="text-green-500 dark:text-green-400">+5.2%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">New Users</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-purple-600 dark:text-purple-400">1,234</p>
        <span class="text-red-500 dark:text-red-400">-1.1%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-full">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
      <ul>
        <li class="flex items-center mb-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Purchased a product</p>
          </div>
        </li>
         <li class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Left a review</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Interactive Portfolio Component

A responsive portfolio component with microinteractions and a pastel color scheme, supporting dark mode with Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About Me</h3>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Your Name</h4>
                <p class="text-gray-600 dark:text-gray-400">A short bio or description about yourself and your work.</p>
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-300 ease-in-out">Contact Me</button>
</div>

Search Components

Categories

Interactive Components