Search Components

Layout Components

Components that structure the overall page layout

Triadic 3D Business Layout Component

A moderate complexity layout component for business/corporate websites, featuring a triadic color scheme and 3D design elements for depth, with full responsiveness and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <header class="max-w-7xl mx-auto mb-8 lg:mb-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <div class="flex flex-col sm:flex-row justify-between items-center">
      <div class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9a9 9 0 00-9-9H3m0 0l3.75 3.75M3 12h6.5m4.25-5.25L12 3m-4.5 9h-4.5m16.5 0h-4.5m-4.5 4.5l-3.75 3.75M12 21V9.75" />
        </svg>
        <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white capitalize">Company Name</h1>
      </div>
      <nav class="mt-4 sm:mt-0">
        <ul class="flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 text-base font-medium">
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Services</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">About</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">

    <!-- Hero/Featured Section (Column 1) -->
    <section class="lg:col-span-2 rounded-xl bg-gradient-to-br from-indigo-500 via-purple-600 to-teal-500 shadow-2xl overflow-hidden p-6 sm:p-8 lg:p-10 relative group transform perspective-1000 rotateY-3 translateZ-0 transition-all duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-deep dark:from-indigo-700 dark:via-purple-800 dark:to-teal-700">
      <div class="absolute inset-0 bg-pattern opacity-10 dark:opacity-20 pointer-events-none"></div>
      <div class="relative z-10 flex flex-col items-start">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4 capitalize drop-shadow-lg">Innovate. Achieve. Transform.</h2>
        <p class="text-base sm:text-lg text-indigo-100 mb-6 lg:mb-8 max-w-2xl">We provide cutting-edge solutions to propel your business forward in the digital age. Our expert team is dedicated to your success.</p>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Discover More</button>
      </div>
    </section>

    <!-- Sidebar/Stats Section (Column 2) -->
    <aside class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY--3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 capitalize">Our Impact</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-indigo-100 rounded-full dark:bg-indigo-900/50">
              <svg class="h-6 w-6 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">250+</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Satisfied Clients</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-purple-100 rounded-full dark:bg-purple-900/50">
              <svg class="h-6 w-6 text-purple-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M13 17v4m-2-2h4m5-16v4m-2-2h4m-2 20h2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h12zm-3-10L14 7l-2 2-2-2-3 3-2-2m6-2V6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">10+ Years</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Industry Experience</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-teal-100 rounded-full dark:bg-teal-900/50">
              <svg class="h-6 w-6 text-teal-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.747-.602-3.328-1.602-4.664z" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">99%</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Project Success Rate</p>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Content Grid (Column 3) -->
    <section class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">

      <!-- Service Card 1 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=1" alt="Web Development" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Web Development</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Building responsive, high-performance websites tailored to your business needs.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 2 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-NEG1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=2" alt="Digital Marketing" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Digital Marketing</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Strategizing and executing effective digital campaigns to maximize your reach.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 3 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=3" alt="Cloud Solutions" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Cloud Solutions</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Scalable and secure cloud infrastructure to power your business operations.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Call to Action Card -->
      <div class="md:col-span-2 lg:col-span-3 bg-indigo-600 dark:bg-purple-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 lg:p-10 flex flex-col sm:flex-row items-center justify-between text-white transform perspective-1000 rotateX-NEG2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <h3 class="text-2xl font-bold mb-2 capitalize">Ready to elevate your business?</h3>
          <p class="text-indigo-100 text-lg">Let's create something extraordinary together.</p>
        </div>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Get Started Today</button>
      </div>

    </section>
  </main>

  <!-- Footer Section -->
  <footer class="max-w-7xl mx-auto mt-8 lg:mt-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 text-center text-gray-700 dark:text-gray-300 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <p>&copy; 2023 Company Name. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Privacy Policy</a>
      <span class="text-gray-400">|</span>
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Terms of Service</a>
    </div>
  </footer>

</div>

<style>
  /* Custom properties for 3D transforms */
  .perspective-1000 { perspective: 1000px; }
  .rotateX-3 { transform: rotateX(3deg); }
  .rotateX-NEG2 { transform: rotateX(-2deg); }
  .rotateY-3 { transform: rotateY(3deg); }
  .rotateY-NEG1 { transform: rotateY(-1deg); }
  .rotateY-2 { transform: rotateY(2deg); }
  .translateZ-0 { transform: translateZ(0); }
  
  /* Deeper shadow for 3D effect */
  .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  }

  /* Simple patterned background for hero */
  .bg-pattern {
    background-image: radial-gradient(#ffffff20 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Ensure transforms apply correctly */
  .group:hover .group-hover\:rotateX-0 { transform: rotateX(0deg); }
  .group:hover .group-hover\:translateZ-10 { transform: translateZ(10px); }
  .group:hover .group-hover\:shadow-2xl { box-shadow: var(--tw-shadow); }
</style>

Glassmorphism_Social_Media_Layout_Component

A complex, responsive social media layout component featuring glassmorphism design with frosted translucent elements, blur effects, and a complementary color scheme. Includes a sidebar, main content area, and right sidebar, all with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-700 dark:from-gray-900 dark:to-gray-800 text-white p-4 font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4">

    <!-- Left Sidebar -->
    <aside class="md:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
        <h1 class="text-xl font-bold text-shadow-sm">GlowNet</h1>
      </div>
      <nav class="space-y-4">
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
          <span>Home</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Messages</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
          <span>Notifications</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Profile</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.33.833 2.35 2.35a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.942 1.543-.833 3.33-2.35 2.35a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.33-.833-2.35-2.35a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.942-1.543.833-3.33 2.35-2.35a1.724 1.724 0 002.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Settings</span>
        </a>
      </nav>
      <button class="mt-8 w-full py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-lg font-semibold transition-colors duration-300 shadow-md">
        Post
      </button>
    </aside>

    <!-- Main Content Area -->
    <main class="md:col-span-3 lg:col-span-3 space-y-4">

      <!-- Search Bar and Profile -->
      <div class="flex flex-col sm:flex-row items-center justify-between p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="relative w-full sm:w-2/3 mb-4 sm:mb-0">
          <input type="text" placeholder="Search for posts, people..." class="w-full p-3 pl-10 rounded-lg bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
          <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white text-opacity-70 dark:text-gray-300" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <span class="font-medium hidden sm:block">Jane Doe</span>
        </div>
      </div>

      <!-- Create New Post -->
      <div class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <input type="text" placeholder="What's on your mind?" class="flex-grow p-3 rounded-full bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-3">
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Photos">
              <svg class="w-6 h-6" 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Video">
              <svg class="w-6 h-6" 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="M7 4v16M17 4v16M3 8h4m-4 8h4M17 8h4m-4 8h4M8 17h8m-1-4l4-4m-4 4l4 4m-12 0l-4-4m4 4l-4-4"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Tag Friends">
              <svg class="w-6 h-6" 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14c-1.49 0-2.873.084-4.245.288C7.178 14.614 6 15.698 6 17v1h12v-1c0-1.302-1.178-2.386-2.755-2.612C14.873 14.084 13.49 14 12 14z"></path></svg>
            </button>
          </div>
          <button class="px-6 py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full font-semibold transition-colors duration-300 shadow-md">
            Post
          </button>
        </div>
      </div>

      <!-- Example Feed Post 1 -->
      <article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <div>
            <p class="font-semibold">John Smith</p>
            <p class="text-sm text-white text-opacity-70 dark:text-gray-300">2 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Enjoying the breathtaking views from the mountains! Nature always finds a way to surprise me. #travel #nature #mountains</p>
        <img src="https://picsum.photos/600/350" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
        <div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>245 Likes</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>32 Comments</span>
            </button>
          </div>
          <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
            <svg class="w-5 h-5" 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.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
            <span>Share</span>
          </button>
        </div>
      </article>

      <!-- Example Feed Post 2 -->
      <article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/women/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <div>
            <p class="font-semibold">Sarah Green</p>
            <p class="text-sm text-white text-opacity-70 dark:text-gray-300">5 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Just finished a new piece for my portfolio! Super excited to share it with you all. What do you think? #art #digitalart #design</p>
        <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
        <div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>180 Likes</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>25 Comments</span>
            </button>
          </div>
          <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
            <svg class="w-5 h-5" 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.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
            <span>Share</span>
          </button>
        </div>
      </article>

    </main>

    <!-- Right Sidebar -->
    <aside class="lg:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg hidden lg:block">
      <h3 class="font-bold text-lg mb-4 text-shadow-sm">Trending Topics</h3>
      <ul class="space-y-3 mb-6">
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#AIrevolution <span class="text-sm text-opacity-60 block">1.2M posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#WebDesignTrends <span class="text-sm text-opacity-60 block">890K posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#NewMusicFriday <span class="text-sm text-opacity-60 block">750K posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#FitnessChallenge <span class="text-sm text-opacity-60 block">600K posts</span></a></li>
      </ul>

      <h3 class="font-bold text-lg mb-4 text-shadow-sm">Who to Follow</h3>
      <ul class="space-y-4">
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Emily White</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@emilyart</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Michael Brown</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@techguru</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Olivia Davis</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@foodieolivia</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
      </ul>
    </aside>

  </div>
</div>

Layout Components Component

A Brutalism-inspired layout component for content consumption with a pastel color scheme and moderate complexity, featuring responsive design and dark mode support.

Open Preview

                <div class="min-h-screen bg-pink-100 p-8 dark:bg-gray-900">
  <header class="mb-8 border-b-4 border-black pb-4 dark:border-white">
    <h1 class="text-5xl font-bold text-black drop-shadow-[6px_6px_0_rgba(0,0,0,1)] dark:text-white dark:drop-shadow-[6px_6px_0_rgba(255,255,255,1)]">
      Brutal Blog
    </h1>
  </header>

  <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
    <!-- Main Content Area -->
    <main class="border-4 border-black bg-purple-200 p-6 dark:border-white dark:bg-gray-800 md:col-span-2">
      <article class="mb-8">
        <h2 class="text-3xl font-bold text-black dark:text-white">The Raw Truth of Web Design</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 26, 2023</p>
        <img src="https://picsum.photos/seed/brutalism/800/400" alt="Abstract brutalist architecture" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          In the realm of web design, Brutalism stands as a defiant counterpoint to sleek interfaces and polished user experiences. It's a style that embraces rawness, exposes underlying structures, and often challenges conventional notions of beauty.
        </p>
        <p class="text-black dark:text-white">
          Characterized by stark typography, high-contrast colors, and a deliberate disregard for typical aesthetic norms, Brutalism can be jarring yet incredibly impactful. It screams authenticity and unfiltered expression, often using simple, unadorned HTML elements to convey its message.
        </p>
      </article>

      <article>
        <h2 class="text-3xl font-bold text-black dark:text-white">Pastel Brutalism: An Oxymoron?</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 25, 2023</p>
        <img src="https://picsum.photos/seed/pastel/800/400" alt="Pastel color blocks" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          Combining the unyielding nature of Brutalism with the softness of pastel colors creates an intriguing paradox. The gentle hues temper the harshness, yet the underlying structural honesty remains. This approach offers a unique visual language, capable of conveying both strength and delicate nuance.
        </p>
        <p class="text-black dark:text-white">
          It's an exploration of contrasts, where the raw edges meet the subtle fades, inviting viewers to reconsider their perceptions of digital aesthetics. The goal is not to prettify, but to present an unvarnished truth, albeit one wrapped in a surprisingly gentle palette.
        </p>
      </article>
    </main>

    <!-- Sidebar / Related Content -->
    <aside class="border-4 border-black bg-green-200 p-6 dark:border-white dark:bg-gray-800">
      <h3 class="mb-4 text-2xl font-bold text-black dark:text-white">Related Reads</h3>
      <ul class="space-y-4">
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">The Art of Deliberate Imperfection</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Explore why imperfections can enhance design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">High Contrast & Readability</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">A deep dive into accessible brutalist design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">Embracing the Unconventional Grid</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Breaking free from traditional layouts.</p>
        </li>
      </ul>

      <h3 class="mb-4 mt-8 text-2xl font-bold text-black dark:text-white">About the Author</h3>
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="h-16 w-16 border-4 border-black dark:border-white" />
        <div>
          <p class="font-bold text-black dark:text-white">Maximus Code</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Digital Architect & Brutalism Enthusiast.</p>
        </div>
      </div>
    </aside>
  </div>

  <footer class="mt-8 border-t-4 border-black pt-4 text-center text-black dark:border-white dark:text-white">
    <p>&copy; 2023 Brutal Blog. All rights reserved, roughly.</p>
  </footer>
</div>

Layout Components Component

A responsive dashboard layout component with Glassmorphism style, vibrant color scheme, and dark theme support using Tailwind CSS. It features a sidebar and a main content area with frosted glass-like translucent elements and blur effects.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-900 dark:to-black text-gray-200 dark:text-gray-300">
    <div class="flex flex-col md:flex-row">
        <!-- Sidebar -->
        <aside class="w-full md:w-64 p-6 space-y-6 bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg m-4 shadow-lg md:h-screen md:sticky md:top-4">
            <div class="text-2xl font-bold text-white dark:text-purple-300">Dashboard</div>
            <nav class="space-y-4">
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l.01.01M17 10v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    Home
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1M12 8c-.11 0-.22-.02-.33-.03M2.985 19.845A6.5 6.5 0 019 12.5v-1.1c0 .991.737 1.838 1.83 2 2.204.306 3.659 1.815 3.659 3.093l-.004.004A6.5 6.5 0 0112 21a6.5 6.5 0 01-6.015-3.155M1.015 19.845C2.107 18.067 4 16.5 6.5 16.5c1.442-.016 2.875-.521 3.864-1.413M7.5 14a.5.5 0 100-1 .5.5 0 000 1z"></path></svg>
                    Analytics
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"></path></svg>
                    Reports
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    Settings
                </a>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-6 md:p-10">
            <header class="flex items-center justify-between mb-8">
                <h1 class="text-4xl font-extrabold text-white dark:text-purple-300">Overview</h1>
                <div class="flex items-center space-x-4">
                    <span class="text-white dark:text-purple-300">Welcome, User!</span>
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
                </div>
            </header>

            <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Total Sales</h2>
                    <p class="text-3xl font-extrabold text-purple-400 dark:text-purple-500">$12,345</p>
                    <p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-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="M7 11h10m-5-5v12"></path></svg> +15% from last month</p>
                </div>

                <!-- Card 2 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">New Users</h2>
                    <p class="text-3xl font-extrabold text-teal-300 dark:text-teal-400">876</p>
                    <p class="text-red-300 mt-2 flex items-center"><svg class="h-5 w-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="M13 17h6m-3-3v6m5-10a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h16a1 1 0 011 1v4z"></path></svg>-5% from last month</p>
                </div>

                <!-- Card 3 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Orders Pending</h2>
                    <p class="text-3xl font-extrabold text-yellow-300 dark:text-yellow-400">42</p>
                    <p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg> +8% from last week</p>
                </div>
            </section>

            <section class="mt-8">
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Recent Activity</h2>
                    <ul class="space-y-4">
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">Jane Doe</span> purchased <span class="font-semibold text-blue-200 dark:text-blue-300">Premium Subscription</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">2 hours ago</span>
                        </li>
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">John Smith</span> commented on <span class="font-semibold text-pink-200 dark:text-pink-300">Marketing Report Q3</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">1 day ago</span>
                        </li>
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">Emily White</span> uploaded <span class="font-semibold text-green-200 dark:text-green-300">New Product Images</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">3 days ago</span>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
    </div>
</div>

E-commerce Layout Component

A simple, responsive e-commerce layout component with a grayscale Material Design aesthetic, featuring a product grid, a header, and a footer, all with dark mode support. Uses picsum.photos for product images.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">E-Commerce Store</h1>
      <nav class="hidden md:block">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Products</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
        </ul>
      </nav>
      <div class="md:hidden">
        <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
          <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="container mx-auto px-4 py-8 flex-grow">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <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 Name 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$49.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <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 Name 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$29.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <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 Name 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$79.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/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 Name 4</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$19.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      &copy; 2023 E-Commerce Store. All rights reserved.
    </div>
  </footer>
</div>

RetroBusinessLayout

A retro/vintage-themed layout component for business websites, featuring a grayscale color scheme and simple design. It is responsive and includes dark mode support.

Open Preview

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

  <!-- Header -->
  <header class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-8 flex justify-between items-center transform transition duration-300 hover:scale-105">
    <h1 class="text-3xl font-bold uppercase tracking-wider">Acme Corp</h1>
    <nav>
      <ul class="flex space-x-6">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 transform transition duration-300 hover:scale-105">
    <section class="text-center mb-10">
      <h2 class="text-4xl font-bold mb-4 uppercase">Welcome to the Future Past</h2>
      <p class="text-lg leading-relaxed">Crafting innovative solutions with a nod to the timeless aesthetics of yesteryear. We bring your business visions to life with robust technology and classic design principles.</p>
    </section>

    <section class="grid md:grid-cols-2 gap-8">
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">Our Mission</h3>
        <p class="text-gray-700 dark:text-gray-300">To fuse nostalgic design sensibilities with modern technological advancements, delivering unparalleled digital experiences that stand the test of time.</p>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">What We Offer</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Web Development (Retro & Modern)</li>
          <li>Digital Marketing Strategies</li>
          <li>Brand Identity & Design</li>
          <li>IT Consulting & Solutions</li>
        </ul>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mt-8 text-center text-gray-600 dark:text-gray-300 transform transition duration-300 hover:scale-105">
    <p>&copy; 2023 Acme Corp. All rights reserved. Embracing the past, building the future.</p>
  </footer>

</div>

Social Media Layout Component

A responsive and complex 3D-inspired social media layout component with vibrant colors and dark theme support using Tailwind CSS. It includes a header with a logo and navigation, a main content area with dynamic cards for posts, and a sidebar for user profiles and trending topics. Each element is styled to give a sense of depth and interaction.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-violet-200 via-pink-200 to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 p-4 font-sans">

  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-5 mb-6 flex items-center justify-between transform transition duration-500 hover:scale-105 z-10 relative" style="transform-style: preserve-3d; transition: transform 0.3s ease-out;">
    <div class="flex items-center space-x-4">
      <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold perspective-1000" style="transform: translateZ(20px);">
        <span style="transform: rotateY(20deg) rotateX(10deg);">S</span>
      </div>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white tracking-tight perspective-1000" style="transform: translateZ(10px);">SocialSphere</h1>
    </div>
    <nav class="space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
      </a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
        Profile
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
      </a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
        Messages
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
      </a>
    </nav>
  </header>

  <!-- Main Content Area -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Main Feed -->
    <main class="lg:col-span-2 space-y-6">

      <!-- Post Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-1 hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-orange-500 opacity-20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-pink-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
            <div>
              <h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Alice Wonderland</h3>
              <p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">2 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
            Exploring the magical forest today! The colors are absolutely breathtaking. Feeling so inspired by nature's beauty. #NatureLover #MagicForest #Inspiration
          </p>
          <img src="https://picsum.photos/seed/forest/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
          <div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
            <div class="flex items-center space-x-4">
              <button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                <span>120 Likes</span>
              </button>
              <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
                 <span>45 Comments</span>
              </button>
            </div>
            <button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
              <span>Share</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Post Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-[-1deg] hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-blue-500 opacity-20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-blue-400 dark:border-green-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
            <div>
              <h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Bob The Builder</h3>
              <p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">5 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
            Just finished a new project! So proud of the team and the hard work everyone put in. Building dreams, one brick at a time. #Construction #HardWork #TeamEffort
          </p>
          <img src="https://picsum.photos/seed/building/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
          <div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
            <div class="flex items-center space-x-4">
              <button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                <span>210 Likes</span>
              </button>
              <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
                <span>88 Comments</span>
              </button>
            </div>
            <button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
              <span>Share</span>
            </button>
          </div>
        </div>
      </div>

    </main>

    <!-- Sidebar -->
    <aside class="space-y-6">

      <!-- User Profile Card -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 text-center transform transition duration-500 hover:scale-105 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-500 opacity-20 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile Picture" class="w-28 h-28 rounded-full mx-auto mb-4 border-4 border-indigo-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:rotate-3 hover:scale-110" style="transform: translateZ(15px);">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2" style="transform: translateZ(10px);">John Doe</h2>
          <p class="text-gray-500 dark:text-gray-400 mb-4" style="transform: translateZ(8px);">@johndoe_official</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6" style="transform: translateZ(6px);">
            Passionate digital creator, exploring new horizons and sharing my journey. Love to connect and collaborate!
          </p>
          <div class="flex justify-around items-center text-gray-600 dark:text-gray-300" style="transform: translateZ(4px);">
            <div>
              <span class="block text-xl font-bold text-purple-600 dark:text-pink-400">1.2K</span>
              <span class="block text-sm">Followers</span>
            </div>
            <div>
              <span class="block text-xl font-bold text-purple-600 dark:text-pink-400">750</span>
              <span class="block text-sm">Following</span>
            </div>
            <div>
              <span class="block text-xl font-bold text-purple-600 dark:text-pink-400">500</span>
              <span class="block text-sm">Posts</span>
            </div>
          </div>
          <button class="mt-6 bg-gradient-to-br from-purple-500 to-pink-500 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 relative z-20" style="transform: translateZ(12px);">
            Edit Profile
          </button>
        </div>
      </div>

      <!-- Trending Topics Card -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-red-500 opacity-20 transform -translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4" style="transform: translateZ(10px);">🔥 Trending Topics</h3>
          <ul class="space-y-3">
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#AIRevolution</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">150K Posts</span>
            </li>
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#FutureTech</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">90K Posts</span>
            </li>
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#CreativeMinds</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">70K Posts</span>
            </li>
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#WebDesignTrends</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">55K Posts</span>
            </li>
          </ul>
        </div>
      </div>

    </aside>
  </div>

</div>

Dashboard Layout Component

A responsive dashboard layout with Material Design aesthetics, including a sidebar, header, and main content area. It supports dark mode and uses complementary colors for a balanced look. The complexity is moderate with interactive-like features achieved purely with CSS and Tailwind classes.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

    <!-- Sidebar -->
    <div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
        <div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
        <nav class="space-y-2 w-full">
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
        </nav>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">

        <!-- Header -->
        <header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
            </div>
        </header>

        <!-- Content Grid -->
        <main class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
            </div>

            <!-- Card 3 (Image Card) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
                <button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
            </div>

            <!-- Card 4 (Chart Placeholder) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
                <div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
                    <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
                </div>
            </div>

        </main>
    </div>

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Layout Components Component

A responsive dashboard layout component with a dark theme, featuring a sidebar and a main content area. It uses a triadic color scheme for visual appeal.

Open Preview

                <div class="min-h-screen flex flex-col bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800 shadow-md">
    <h1 class="text-2xl font-bold text-cyan-400">Dashboard</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Home</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Settings</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Profile</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <div class="flex flex-1 flex-col md:flex-row">
    <!-- Sidebar -->
    <aside class="w-full md:w-64 bg-gray-800 p-4 shadow-lg">
      <nav>
        <ul class="space-y-4">
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Overview</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Analytics</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Reports</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Users</a></li>
        </ul>
      </nav>
    </aside>

    <!-- Content -->
    <main class="flex-1 p-6">
      <h2 class="text-3xl font-semibold mb-6 text-cyan-400">Welcome to your Dashboard</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-orange-400">Total Sales</h3>
          <p class="text-3xl font-bold text-gray-100">$12,345</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-lime-400">New Customers</h3>
          <p class="text-3xl font-bold text-gray-100">256</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-cyan-400">Page Views</h3>
          <p class="text-3xl font-bold text-gray-100">8,765</p>
        </div>
      </div>

      <!-- Example Data Table -->
      <div class="mt-8 bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-bold mb-4 text-cyan-400">Recent Orders</h3>
        <div class="overflow-x-auto">
          <table class="min-w-full leading-normal">
            <thead>
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Order ID</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Product</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Amount</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1001</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-lime-400">Laptop Pro</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$999</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1002</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-orange-400">Mechanical Keyboard</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$120</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-amber-400">Pending</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1003</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-cyan-400">Wireless Mouse</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$50</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</div>

E-commerce Layout with 3D Design

A responsive web component layout for e-commerce with 3D design elements, incorporating a complementary color scheme and dark theme support. It features product cards, a navigation bar, and a footer, all styled with Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <nav class="flex justify-between items-center py-4">
    <div class="text-2xl font-bold text-gray-900 dark:text-white">ShopLogo</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Home</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Products</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Contact</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Cart</a></li>
    </ul>
  </nav>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=1" alt="Product 1" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 1</h2>
        <p class="text-gray-700 dark:text-gray-300">$19.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=2" alt="Product 2" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 2</h2>
        <p class="text-gray-700 dark:text-gray-300">$29.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=3" alt="Product 3" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 3</h2>
        <p class="text-gray-700 dark:text-gray-300">$39.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
  </div>
  <footer class="mt-6 p-4 bg-gray-200 dark:bg-gray-600 rounded-lg text-center text-gray-800 dark:text-gray-300">
    <p>© 2023 E-commerce Store. All rights reserved.</p>
  </footer>
</div>

Search Components

Categories

Layout Components