インタラクティブコンポーネント

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

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

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

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

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

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

                <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
              

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

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

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