All Components

                <div class="flex flex-col items-center justify-center bg-gray-800 p-6 rounded-lg shadow-lg md:flex-row md:space-x-8">
    <div class="w-full md:w-1/2 transform perspective-1000">
        <div class="relative w-full h-64 rounded overflow-hidden shadow-2xl">
            <img src="https://picsum.photos/500/400/?random" alt="360 view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-in-out hover:rotate-y-360" />
        </div>
    </div>
    <div class="flex flex-col justify-center mt-4 md:mt-0">
        <h2 class="text-white text-xl font-bold mb-2">Explore the 360° View</h2>
        <p class="text-gray-400">Experience an immersive 3D view of the product. Move your cursor around to get a complete view.</p>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <p class="text-white text-sm">Uploaded by John Doe</p>
        </div>
    </div>
</div>
<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 { background-color: #2d3748; }
        .text-gray-400 { color: #cbd5e0; }
        .border-gray-600 { border-color: #4a5568; }
    }

    /* 360° Rotation Effect */
    @keyframes rotate {
        from { transform: rotateY(0deg); }
        to { transform: rotateY(360deg); }
    }

    .hover\:rotate-y-360:hover {
        animation: rotate 2s infinite;
    }
</style>
              

                <div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
  <div class="container mx-auto p-4">
    <div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">

      <!-- File List -->
      <div class="w-full md:w-1/3 pr-4">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
        <ul>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">document.txt</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">image.jpg</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">video.mp4</span>
          </li>
        </ul>
      </div>

      <!-- File Preview -->
      <div class="w-full md:w-2/3 mt-4 md:mt-0">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
        <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
          Select a file to preview
        </div>
      </div>

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

                <div class="container mx-auto p-4 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
  </div>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>

</div>
              

                <div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:shadow-lg sm:max-w-md">
  <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Login with Socials</h2>
  <div class="space-y-4">
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/google.svg" alt="Google">
      Sign in with Google
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/facebook.svg" alt="Facebook">
      Sign in with Facebook
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/twitter.svg" alt="Twitter">
      Sign in with Twitter
    </button>
  </div>
</div>
              

                ```html
<div class="dark:bg-gray-900">
  <section class="container mx-auto p-6">
    <div class="flex flex-col md:flex-row items-center">
      <div class="flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">Media Component</h1>
        <p class="mb-8 leading-relaxed text-gray-600 dark:text-gray-300">This is a responsive media component with glassmorphism style and dark theme support.</p>
      </div>
      <div class="w-full md:w-1/2">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="object-cover object-center h-full w-full" alt="hero" src="https://picsum.photos/720/600">
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-4 mt-8">
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/720/400" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 1</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/721/401" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 2</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/722/402" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 3</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
    </div>
  </section>
</div>
```
              

                <header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 p-6">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40?random=1" alt="Logo" class="rounded-full">
            <h1 class="text-white text-3xl font-bold font-mono tracking-widest">Retro Header</h1>
        </div>
        <nav>
            <ul class="flex space-x-6 text-white">
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Gallery</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="mt-4 text-center">
        <img src="https://picsum.photos/800/200?random=1" alt="Header Image" class="rounded-lg shadow-lg mx-auto">
    </div>
</header>

<style>
    /* Dark Theme Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a2e;
        }
    }
</style>
              

                <div class="container mx-auto p-4 shadow-lg rounded-lg bg-white dark:bg-gray-800 transition-colors duration-300">
  <div class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Container</div>
  <p class="text-gray-700 dark:text-gray-300">This is a responsive container with Material Design inspired shadows and styling. It also supports dark mode.</p>
  <div class="mt-4">
    <img src="https://picsum.photos/seed/material-container/400/200" alt="Placeholder Image" class="rounded-md shadow-md">
  </div>
  <div class="flex items-center mt-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of a user">
    <div class="text-sm">
      <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
      <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
  </div>
</div>
              

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md transform hover:scale-105 transition duration-300">
  <img class="w-full h-48 object-cover rounded-t-lg mb-4" src="https://picsum.photos/seed/retro/600/400" alt="Retro Image">
  <div class="text-gray-700 dark:text-gray-300">
    <h2 class="text-xl font-bold mb-2">Retro Media Title</h2>
    <p class="text-base mb-4">This is a description of the retro media component, evoking a sense of nostalgia with its vintage design and colors.</p>
    <div class="flex items-center text-sm">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
      <span>By John Doe</span>
      <span class="ml-auto">Posted on 1995-10-26</span>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="flex space-x-4 p-6 bg-white rounded-lg shadow-xl dark:bg-gray-700">
        <!-- Facebook Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path 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.79c0-2.508 1.493-3.896 3.776-3.896 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.33v6.988C18.343 21.128 22 16.991 22 12z" />
            </svg>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.143 8.143 0 0022 5.92a8.11 8.11 0 01-2.357.646 4.114 4.114 0 001.816-2.274c-.82-.485-1.73-.84A4.081 4.081 0 0010.95 3.515 4.121 4.121 0 007.07 6.5c0 .255.03.503.08.746A11.62 11.62 0 012.817 4.71a4.103 4.103 0 001.27 5.475 4.073 4.073 0 01-1.852-.514c0 0 0 .055 0 .088a4.118 4.118 0 003.306 4.032 4.202 4.202 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
            </svg>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 3a2 2 0 00-2-2H7a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3zM9 8a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1 1 1 0 01-1 1H9zm6 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1zm0 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1z" clip-rule="evenodd" />
                <path d="M12 18a3 3 0 100-6 3 3 0 000 6z" />
            </svg>
        </a>
    </div>
</div>
              

                <div class="relative w-64">
    <!-- Dropdown Button -->
    <button class="bg-gray-800 text-white font-semibold py-2 px-4 rounded inline-flex items-center focus:outline-none focus:ring-2 focus:ring-white">
        <span>Dropdown</span>
        <svg class="ml-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10l5 5 5-5" />
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div class="absolute w-full bg-gray-700 rounded-md mt-1 shadow-lg z-10 hidden group-hover:block transition-all ease-in-out duration-200 transform origin-top scale-y-0 group-hover:scale-y-100">
        <div class="py-1">
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                Profile
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                Settings
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                Logout
            </a>
        </div>
    </div>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-700 { background-color: #374151; }
        .text-gray-300 { color: #D1D5DB; }
        .hover\:bg-gray-600:hover { background-color: #4B5563; }
    }
</style>