Search Components

All Components

Browse all available Tailwind CSS components

File Viewer Component

A complex file viewer component designed for a portfolio, featuring dark mode with complementary colors, showing a file tree, content preview, and detailed information. Fully responsive.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-950 transition-colors duration-300">
  <div class="container mx-auto rounded-lg shadow-xl overflow-hidden md:flex flex-col md:flex-row dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
    <!-- Sidebar / File Tree -->
    <div class="w-full md:w-1/4 bg-gray-50 dark:bg-gray-850 p-4 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 flex-shrink-0">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100 flex items-center">
        <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-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 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
        </svg>
        Projects
      </h3>
      <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            <span class="font-medium">My Portfolio (Active)</span>
          </button>
          <ul class="ml-4 mt-1 space-y-1">
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md bg-indigo-50 dark:bg-orange-950 text-indigo-700 dark:text-orange-300 font-semibold hover:bg-indigo-100 dark:hover:bg-orange-900 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-indigo-600 dark:text-orange-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                README.md
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-emerald-500 dark:text-emerald-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                index.html
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                styles.css
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-blue-500 dark:text-blue-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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5.293a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0012.586 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V10h-6z"></path>
                </svg>
                script.js
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-purple-500 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="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>
                assets/
              </button>
            </li>
          </ul>
        </li>
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            Old Projects
          </button>
        </li>
      </ul>
    </div>

    <!-- Main Content / File Preview -->
    <div class="flex-1 flex flex-col">
      <!-- Top Bar / File Name & Actions -->
      <div class="bg-white dark:bg-gray-850 p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between flex-wrap gap-2">
        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-100 flex items-center">
          <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
          </svg>
          README.md
        </h2>
        <div class="flex space-x-2">
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 dark:focus:ring-orange-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            Preview
          </button>
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            Edit
          </button>
        </div>
      </div>

      <!-- File Content / Preview Area -->
      <div class="flex-grow overflow-y-auto p-6 bg-white dark:bg-gray-900 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-200 dark:scrollbar-track-gray-800">
        <div class="prose dark:prose-invert max-w-none text-gray-800 dark:text-gray-200">
          <h1 class="text-3xl font-bold mb-4 text-indigo-700 dark:text-orange-400">README.md - My Portfolio</h1>
          <p class="mb-4">Welcome to my personal portfolio project! This repository showcases a collection of my best work in web development, focusing on responsive design, modern UI/UX, and performance.</p>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Features:</h2>
          <ul class="list-disc list-inside space-y-2 mb-4">
            <li>Fully responsive design for desktop, tablet, and mobile.</li>
            <li>Implemented with <strong class="text-indigo-600 dark:text-orange-400">HTML5</strong>, <strong class="text-indigo-600 dark:text-orange-400">CSS3</strong> (Tailwind CSS), and Vanilla <strong class="text-indigo-600 dark:text-orange-400">JavaScript</strong>.</li>
            <li>Dark mode support for reduced eye strain.</li>
            <li>Interactive components and smooth animations.</li>
            <li>Optimized for performance and accessibility.</li>
          </ul>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Sections:</h2>
          <ol class="list-decimal list-inside space-y-2 mb-4">
            <li><strong>Home:</strong> Introduction and quick overview.</li>
            <li><strong>About Me:</strong> My background, skills, and values.</li>
            <li><strong>Projects:</strong> Detailed view of key projects with live demos and source code.</li>
            <li><strong>Contact:</strong> How to get in touch.</li>
          </ol>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Technologies Used:</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=1" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              HTML5
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=2" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Tailwind CSS
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=3" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              JavaScript
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=4" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Responsive Design
            </span>
          </div>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Setup:</h2>
          <p class="mb-4">To run this project locally, clone the repository and open <code>index.html</code> in your browser.</p>
          <pre class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 text-sm overflow-x-auto border border-gray-200 dark:border-gray-700"><code class="text-gray-800 dark:text-gray-200">git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio
# Open index.html in your browser</code></pre>
          <p class="mt-4 text-gray-600 dark:text-gray-400">Feel free to explore and provide feedback. Thank you for visiting!</p>
        </div>
      </div>

      <!-- File Details / Bottom Bar (optional, could also be on the side) -->
      <div class="bg-white dark:bg-gray-850 p-4 border-t border-gray-200 dark:border-gray-800 text-sm text-gray-600 dark:text-gray-300 flex justify-between items-center flex-wrap gap-2">
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Updated:</span> 2 hours ago by
          <img class="inline-block h-6 w-6 rounded-full ring-2 ring-indigo-300 dark:ring-orange-600 ml-1 mr-1" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="font-medium text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Size:</span> 1.2 KB
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Type:</span> Markdown File
        </div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Grayscale_Business_Footer

A responsive, skeumorphic grayscale footer navigation component for business/corporate websites, supporting dark mode.

Open Preview

                <footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),inset_0_-1px_0_0_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2),inset_0_-1px_0_0_rgba(255,255,255,0.05)] pt-12 pb-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-700 dark:text-gray-300">

      <!-- Company Info Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">About Us</span>
        </h3>
        <p class="text-sm leading-relaxed mb-4">
          Providing innovative solutions with a commitment to excellence. We create value through technology and expertise.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.056 22 16.299 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12.996 9.832L14.77 2H18l-5.6 6.4L20 22h-4.432l-3.376-7.056L8 22H4l5.367-12.7L2 2H6.42l3.714 5.3L12.996 9.832zm-2.88 1.134l-.794-1.127L5.704 3H3.04l8.307 10.97L20.89 21h2.748L12.016 9.966l-1.905-.001z"/>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.083.677-.217.677-.48C9.51 20.259 9.51 18.665 9.51 16.03V15.03c0-1.076-.23-1.477-.45-1.74a.5.5 0 00-.09-.08c-.14-.07-.35-.14-.75-.14-.94 0-1.5-.94-.09-1.34.8-.4 1.25.1 1.25.1a1.9 1.9 0 00.94.31c.88 0 1.2-.18.94-.48-.68-.2-1.35-.61-1.35-.61C7.8 10.02 7.02 9.4 7.02 8.5c0-1.77 1.83-2.02 2.37-2.02.48 0 1.05.27 1.25.48a1.53 1.53 0 00.31-.05c.8-.08 1.5-.18 2-.18C14.73 5.48 15.65 6 15.65 7c0 .54-.2 1.48-.94 1.74a.5.5 0 00-.08.08c-.2.27-.45.67-.45 1.74v1.07c0 2.63.003 4.22.003 4.48 0 .26.2.56.677.48A10 10 0 0022 12.017C22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Quick Links</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Services</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Portfolio</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Team</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Blog</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Careers</a></li>
        </ul>
      </div>

      <!-- Resources Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Resources</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Support Center</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">FAQs</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Terms of Service</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Site Map</a></li>
        </ul>
      </div>

      <!-- Contact Us Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Contact Us</span>
        </h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M9.667 2.115C13.25 1.523 16.48.513 18.062 2.213A3.684 3.684 0 0020 5.467V16.5c0 .356-.125.688-.346.953A4.6 4.6 0 0117.5 19h-15C1.84 19 1 18.156 1 17V3.5C1 2.399 2.5 2 4.14 2 5.568 2 7.153 2.502 9.667 2.115zM5 9c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1zm-10 4c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1z" clip-rule="evenodd"></path></svg> 123 Business Rd, Suite 456</p>
          <p class="pl-6">City, State 12345</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg> +1 (555) 123-4567</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg> [email protected]</p>
        </address>
      </div>
    </div>

    <!-- Copyright and Logo Section -->
    <div class="mt-12 pt-8 text-center border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2)]">
      <div class="flex flex-col items-center justify-center space-y-4 md:flex-row md:space-y-0 md:space-x-8">
        <img src="https://picsum.photos/seed/companylogo/80/40" alt="Company Logo" class="w-20 h-10 object-contain filter grayscale invert dark:invert-0 shadow-[2px_2px_4px_rgba(0,0,0,0.2),-2px_-2px_4px_rgba(255,255,255,0.8)] dark:shadow-[2px_2px_4px_rgba(0,0,0,0.8),-2px_-2px_4px_rgba(255,255,255,0.1)] rounded-sm p-1">
        <p class="text-sm text-gray-600 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>

Neumorphic User Profile Card

A simple, responsive user profile card with a neumorphic design aesthetic using earth tones, suitable for dashboards. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 bg-stone-100 dark:bg-stone-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl
    bg-stone-200 shadow-custom-light
    dark:bg-stone-700 dark:shadow-custom-dark
    transition-all duration-300 ease-in-out
    border border-stone-300 dark:border-stone-600">

    <div class="flex flex-col items-center text-center">
      <div class="relative mb-6">
        <img class="w-32 h-32 rounded-full object-cover
          shadow-custom-light-inset dark:shadow-custom-dark-inset
          border-4 border-stone-200 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
      </div>

      <h2 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2
        transition-colors duration-300">John Doe</h2>
      <p class="text-md text-stone-500 dark:text-stone-400 mb-4
        transition-colors duration-300">Software Engineer</p>

      <div class="w-full mb-6">
        <button class="w-full py-3 px-6 rounded-xl
          bg-stone-300 text-stone-700 font-medium
          shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:text-stone-200
          dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50
          text-base sm:text-lg">
          View Profile
        </button>
      </div>

      <div class="flex justify-center space-x-4 w-full">
        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
          <span class="sr-only">Email</span>
        </button>

        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          <span class="sr-only">Portfolio</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Neumorphism - Add this to your main CSS file or a <style> tag if not using PostCSS for custom utilities -->
<style>
  .shadow-custom-light {
    box-shadow: 7px 7px 14px #b8b8b8, -7px -7px 14px #ffffff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 7px 7px 14px #3d3b38, -7px -7px 14px #575550;
  }

  .shadow-custom-light-inset {
    box-shadow: inset 5px 5px 10px #b8b8b8, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-custom-dark-inset {
    box-shadow: inset 5px 5px 10px #3d3b38, inset -5px -5px 10px #575550;
  }

  /* Buttons */
  .shadow-custom-light-button {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-custom-light-button-hover:hover {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .active\:shadow-custom-light-button-pressed:active {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-custom-dark-button {
    box-shadow: 5px 5px 10px #3d3b38, -5px -5px 10px #575550;
  }
  .dark .hover\:shadow-custom-dark-button-hover:hover {
    box-shadow: 3px 3px 6px #3d3b38, -3px -3px 6px #575550;
  }
  .dark .active\:shadow-custom-dark-button-pressed:active {
    box-shadow: inset 3px 3px 6px #3d3b38, inset -3px -3px 6px #575550;
  }
</style>

Glassmorphism_Pastel_Mega_Menu

A simple, responsive mega menu component with a glassmorphism design, pastel color scheme, and dark mode support, suitable for dashboard navigation. Features frosted, translucent elements with blur effects.

Open Preview

                <nav class="bg-gradient-to-br from-purple-100/60 to-blue-100/60 backdrop-blur-lg dark:from-purple-900/60 dark:to-blue-900/60 dark:text-gray-100 p-4 transition-colors duration-300">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-lg font-semibold text-purple-800 dark:text-purple-200 transition-colors duration-300">Dashboard</div>

    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden focus:outline-none dark:text-gray-200" aria-label="Toggle menu">
      <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 12h16m-7 6h7"></path>
      </svg>
    </button>

    <!-- Mega Menu Content -->
    <div id="mega-menu" class="hidden md:flex md:items-center md:space-x-8 absolute md:relative top-full left-0 w-full md:w-auto mt-2 md:mt-0 p-4 md:p-0
                            bg-gradient-to-br from-purple-50/70 to-blue-50/70 backdrop-blur-lg dark:from-purple-950/70 dark:to-blue-950/70
                            shadow-lg md:shadow-none rounded-lg md:rounded-none transition-all duration-300 ease-in-out transform md:transform-none
                            opacity-0 md:opacity-100 scale-95 md:scale-100 origin-top md:origin-center">
      <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0 w-full">

        <!-- Section 1: Overview -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Overview</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Analytics</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Reports</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Summary</a></li>
          </ul>
        </div>

        <!-- Section 2: Management -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Management</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Users</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Settings</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Integrations</a></li>
          </ul>
        </div>

        <!-- Section 3: Quick Links -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Quick Links</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Feedback</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Contact Support</a></li>
          </ul>
        </div>

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

<!-- Script for mobile menu toggle (pure CSS solution is complex for mega menus without JS) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', () => {
      const isHidden = megaMenu.classList.contains('hidden');
      if (isHidden) {
        megaMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
        megaMenu.classList.add('flex', 'opacity-100', 'scale-100');
      } else {
        megaMenu.classList.add('opacity-0', 'scale-95');
        megaMenu.classList.remove('opacity-100', 'scale-100', 'flex');
        // Using a timeout to ensure transition plays before hiding completely
        setTimeout(() => {
          megaMenu.classList.add('hidden');
        }, 300); // Should match the transition duration
      }
    });
  });
</script>

3D_Triadic_Simple_Business_Navigation

A simple, responsive business navigation component with a 3D design aesthetic and a triadic color scheme, supporting dark mode.

Open Preview

                <nav class="bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 shadow-xl dark:from-gray-800 dark:via-zinc-900 dark:to-black transition-all duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex-shrink-0">
      <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative group">
        <span class="block transform -translate-x-0.5 -translate-y-0.5 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 ease-out z-10 relative">3D Company</span>
        <span class="absolute inset-0 bg-yellow-300 dark:bg-sky-400 opacity-60 rounded-lg blur-sm group-hover:blur-md transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Home
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Services
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        About
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Contact
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-white hover:text-yellow-200 dark:hover:text-sky-300 focus:outline-none focus:text-yellow-200 dark:focus:text-sky-300" aria-label="Toggle navigation">
        <svg class="h-8 w-8" 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>

  <div id="mobile-menu" class="hidden md:hidden bg-indigo-600 dark:bg-gray-950">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Services</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Contact</a>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for mobile menu toggle (not part of Tailwind CSS component but for functional demo)
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        // Optional: Change icon on toggle
        const icon = button.querySelector('svg');
        if (menu.classList.contains('hidden')) {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        } else {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
        }
      });
    }
  });
</script>

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>

Video Player Component

A complex, responsive video player component for e-commerce, featuring triadic colors and microinteraction-focused design. Includes playback controls, volume, progress bar, fullscreen, settings, and a product overlay, with full dark mode support.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-6xl bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden
              flex flex-col lg:flex-row transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-700">

    <!-- Video Player Section -->
    <div class="relative flex-1 bg-black overflow-hidden group">
      <video class="w-full h-full object-contain" poster="https://picsum.photos/1280/720?random=1" controls="false" playsinline>
        <!-- Replace with actual video source -->
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>

      <!-- Overlay for play button and controls fade -->
      <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <!-- Big Play Button (initially visible, fades out on play) -->
        <button class="absolute text-white text-opacity-80 hover:text-opacity-100 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-teal-500/50 rounded-full">
          <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z" />
          </svg>
        </button>

        <!-- Controls bar (fades in on hover) -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/70 to-transparent
                    translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out
                    flex flex-col space-y-2 opacity-0 group-hover:opacity-100">

          <!-- Progress Bar -->
          <div class="w-full h-2 bg-gray-700 rounded-full cursor-pointer group">
            <div class="h-full bg-teal-400 rounded-full w-1/3 group-hover:bg-teal-300 transition-all duration-150 relative">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-teal-400 rounded-full scale-0 group-hover:scale-100 transition-transform duration-150"></div>
            </div>
          </div>

          <!-- Controls -->
          <div class="flex items-center justify-between text-white text-opacity-90">
            <div class="flex items-center space-x-4">
              <!-- Play/Pause -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14.017 19.823L22 12 14.017 4.177V9H2v6h12.017z" />
                </svg>
              </button>
              <!-- 10s back -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2zm6.27 4.54l-1.42 1.42C16.14 15.65 15 16 15 16s0-.8.03-1.07l1.09-1.09c.47-.47.66-1.12.5-1.74l-.99-3.46c-.16-.62-.97-1.1-1.55-.77l-1.76.99-1.42-1.42L15 6.77c.46-.22.98-.32 1.5-.27l3.46.99c.62.16 1.1.97.77 1.55l-.99 1.76-1.42 1.42z" />
                </svg>
              </button>

              <!-- Volume -->
              <div class="relative flex items-center group">
                <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 10v4c0 .55.45 1 1 1h3l5 5V5l-5 5H4c-.55 0-1 .45-1 1zm12.5 4.58l-1.41-1.41c.95-.95 1.56-2.22 1.56-3.57s-.61-2.62-1.56-3.57l1.41-1.41c1.36 1.36 2.22 3.25 2.22 5s-.86 3.64-2.22 5z" />
                  </svg>
                </button>
                <input type="range" min="0" max="100" value="70" class="ml-2 w-0 group-hover:w-24 overflow-hidden appearance-none bg-transparent h-1 rounded-full dark:bg-gray-700 transition-all duration-300 ease-out focus:outline-none
                                      [&::-webkit-slider-runnable-track]:bg-gray-700 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-teal-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:-mt-1.5
                                      [&::-moz-range-track]:bg-gray-700 [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-thumb]:bg-teal-400 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full">
              </div>

              <span class="text-sm">00:00 / 02:30</span>
            </div>

            <div class="flex items-center space-x-4">
              <!-- Settings -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                </svg>
              </button>
              <!-- Fullscreen -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
                </svg>
              </button>
            </div>
          </div>

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

    <!-- Product Info Section -->
    <div class="w-full lg:w-96 p-6 lg:p-8 flex flex-col space-y-6 bg-yellow-50 dark:bg-gray-800 
                text-gray-900 dark:text-gray-100 border-t lg:border-t-0 lg:border-l border-yellow-200 dark:border-gray-700">

      <div class="flex justify-between items-start">
        <div>
          <h2 class="text-2xl lg:text-3xl font-extrabold text-indigo-700 dark:text-orange-300 leading-tight">Organic Hand Cream</h2>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Lavender & Aloe Vera</p>
        </div>
        <span class="text-3xl font-bold text-teal-600 dark:text-teal-400 animate-pulse-once">$29.99</span>
      </div>

      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
        Discover the soothing power of nature with our best-selling hand cream. Enriched with organic lavender and aloe vera, it deeply moisturizes and rejuvenates your skin, leaving it soft and fragrant.
      </p>

      <!-- Features/Highlights -->
      <div class="grid grid-cols-2 gap-4 text-sm">
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Organic Certified</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2zm6 13H4V8h16v11z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Vegan Friendly</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">5-star Rated</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Cruelty-Free</span>
        </div>
      </div>

      <!-- Call to Action -->
      <button class="w-full py-3 px-6 rounded-xl
                     bg-teal-500 text-white text-lg font-semibold shadow-md
                     hover:bg-teal-600 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-teal-500/50
                     active:scale-98 transform transition-all duration-200 ease-in-out
                     dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500/50">
        Add to Cart
        <span class="ml-2 inline-block transition-transform group-hover:translate-x-1 duration-200 animate-bounce-horizontal-once">
          <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17.25 10.01l-1.63-1.63c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L15.19 11l-9 9H4v-1.72L11 9.19l1.63 1.63c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L17.25 10.01zM11 6.17l5.24 5.24L11 16.65 6.17 11.24zM16 2l-2 2h-4L8 2H2v20h20V2h-6z"/>
          </svg>
        </span>
      </button>

      <!-- Small Description / Reviews -->
      <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-2">
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User avatar">
        </div>
        <span>+2,450 Happy Customers</span>
      </div>

    </div>

  </div>

  <!-- Custom keyframe animation definitions for microinteractions -->
  <style>
    @keyframes pulse-once {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    .animate-pulse-once {
      animation: pulse-once 1.2s ease-in-out;
    }

    @keyframes bounce-horizontal-once {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(5px); }
      50% { transform: translateX(-5px); }
      75% { transform: translateX(2px); }
    }
    .animate-bounce-horizontal-once {
      animation: bounce-horizontal-once 0.8s ease-out;
    }
  </style>

  <!-- Dark mode toggle for demonstration, not part of the component itself -->
  <script>
    // This script toggles dark mode for demonstration purposes.
    // In a real application, you'd likely use a framework or store user preference.
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

    function toggleDarkMode() {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
      } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
      }
    }
  </script>
  <button onclick="toggleDarkMode()" class="fixed bottom-4 right-4 p-3 rounded-full bg-gray-800 text-white shadow-lg z-50 dark:bg-white dark:text-gray-900 focus:outline-none focus:ring-4 focus:ring-teal-500/50">
    <svg class="w-6 h-6 block dark:hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    <svg class="w-6 h-6 hidden dark:block" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.04 6.29a.75.75 0 0 1 1.06-.02l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-.02 1.06ZM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 1.5a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H12a.75.75 0 0 1 .75.75ZM16.96 6.29A.75.75 0 0 1 18.02 7.35l-1.5 1.5a.75.75 0 0 1-1.06-.02l-1.5-1.5a.75.75 0 0 1 .02-1.06ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5.25 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM20.72 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5h2.25a.75.75 0 0 1 .75.75ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM7.04 17.71a.75.75 0 0 1-.02-1.06l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-1.06.02Zm9.92 0a.75.75 0 0 1 .02-1.06l1.5-1.5a.75.75 0 1 1 1.04 1.08l-1.5 1.5a.75.75 0 0 1-1.06-.02Z"/></svg>
  </button>

</div>

Social Media Timeline Component - Glassmorphism

A complex, responsive social media timeline component featuring glassmorphism design with analogous color scheme, dark mode support, and interactive elements for social networking interfaces.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-900 dark:text-white relative z-10">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-purple-500">Your Feed</span>
    </h1>

    <div class="space-y-8 relative">
      <!-- Timeline Line -->
      <div class="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-blue-300 to-indigo-400 dark:from-blue-600 dark:to-purple-700 h-full hidden md:block"></div>

      <!-- Post 1 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-400 dark:border-blue-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Alex Johnson</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@alex_joh &#x2022; 2 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Just finished an amazing hike! The views were absolutely breathtaking. Nature truly is the best therapy. #Hiking #NatureLover #AdventureTime
            </p>
            <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <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 22.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>128</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>34</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <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.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-blue-500 dark:text-blue-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-md"></div>
      </article>

      <!-- Post 2 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-indigo-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Sarah Chen</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@sarah_c_design &#x2022; 4 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              New design mockups are finally ready! So excited to get feedback on the new UX flow. What do you all think of the dark mode implementation?
            </p>
            <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <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 22.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>210</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>58</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <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.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-indigo-500 dark:text-indigo-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-md"></div>
      </article>

      <!-- Post 3 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-purple-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Michael Lee</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@mike_dev &#x2022; 8 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Coding late tonight, building out new features for the app! Energy drinks and good music are getting me through. Almost there! 💻 #FrontendDev #CodingLife
            </p>
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <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 22.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>95</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>21</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <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.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-purple-500 dark:text-purple-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-md"></div>
      </article>
    </div>
  </div>
</div>

Glassmorphism Site Map Component

A responsive site map component with a glassmorphism design, analogous color scheme, and dark mode support, suitable for business and corporate websites.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-green-950">
  <div class="max-w-7xl mx-auto dark:text-gray-200">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 dark:text-white">
      Explore Our Site
    </h2>

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

      <!-- Column 1: Company -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Company</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">About Us</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Our Mission</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Team</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Careers</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Contact Us</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Press & Media</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 2: Services & Solutions -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Services & Solutions</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Enterprise Solutions</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Data Analytics</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cloud Computing</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cybersecurity</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Consulting</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Managed Services</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 3: Resources & News -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Resources & News</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Blog</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Case Studies</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Whitepapers</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Webinars</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">FAQ</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Latest News</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 4: Support -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Support</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Help Center</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Submit a Ticket</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Documentation</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Service Status</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Partnerships</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 5: Legal -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Legal</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Privacy Policy</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Terms of Service</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cookie Policy</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Legal Disclaimers</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 6: Industries (Example with Image) -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 flex flex-col justify-between transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10 flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Industries</h3>
          <ul class="space-y-3 mb-6">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Finance</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Healthcare</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Retail</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Manufacturing</a></li>
          </ul>
        </div>
        <div class="relative z-10 mt-auto">
          <img src="https://picsum.photos/400/250" alt="Placeholder Image for Industries" class="rounded-xl shadow-lg w-full h-auto object-cover">
        </div>
      </div>

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

Neumorphic Accordion

A simple, responsive, and dark-mode-compatible accordion component with a neumorphic grayscale design, suitable for portfolio sections.

Open Preview

                <div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-inner-dark">
  <div class="text-center mb-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">My Projects</h2>
    <p class="mt-2 text-md text-gray-600 dark:text-gray-300">Here's a glimpse of my recent work.</p>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-1" class="hidden peer" />
    <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Alpha</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">A responsive web application built with modern front-end technologies. Focused on delivering a seamless user experience.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-2" class="hidden peer" />
    <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Beta</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Developed a robust backend API for data management and user authentication. Scalable and efficient.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group">
    <input type="checkbox" id="accordion-3" class="hidden peer" />
    <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Gamma</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Designed and implemented UI/UX for a mobile application, focusing on intuitive navigation and visual hierarchy.</p>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Gamma Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>
</div>

<!-- To make neumorphism work, you need CSS variables in your global CSS. -->
<!-- Add this to your main CSS file (e.g., style.css or a <style> tag): -->
<!--
:root {
  --shadow-light: #ffffff;
  --shadow-dark: #cccccc;
  --neumorphic-blur: 10px;
  --neumorphic-distance: 4px;
}

.dark {
  --shadow-light: #444444;
  --shadow-dark: #1a1a1a;
}

.shadow-neumorphic {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-dark {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset-dark {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-inner {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.1), inset -3px -3px 6px rgba(255,255,255,0.7);
}

.dark .shadow-inner-dark {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.6), inset -3px -3px 6px rgba(255,255,255,0.05);
}
-->

1 ... 120 121 122 123 124 ... 335

Search Components

Categories

All Components