All Components

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-amber-300 mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">User Statistics</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Users: 250</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Data Visualization" class="w-full rounded-lg mt-2">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">Sales Overview</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Sales: $10,000</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Sales Overview" class="w-full rounded-lg mt-2">
        </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4 mt-4">
        <h2 class="text-xl text-green-200">Recent Activity</h2>
        <ul class="text-gray-300 dark:text-gray-400">
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User1 logged in</span>
            </li>
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User2 made a purchase</span>
            </li>
            <li class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User3 logged out</span>
            </li>
        </ul>
    </div>
</div>
              

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
  <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-blue-700 transform transition duration-300 hover:scale-110 hover:rotate-3" style="perspective: 1000px; transform: rotateY(15deg) rotateX(5deg);">Marketing Analysis</span>
  <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-red-700 transform transition duration-300 hover:scale-110 hover:-rotate-6" style="perspective: 1000px; transform: rotateY(-10deg) rotateX(-3deg);">Sales Performance</span>
  <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-green-700 transform transition duration-300 hover:scale-110 hover:rotate-4" style="perspective: 1000px; transform: rotateY(5deg) rotateX(10deg);">Customer Feedback</span>
  <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-yellow-700 transform transition duration-300 hover:scale-110 hover:-rotate-4" style="perspective: 1000px; transform: rotateY(-5deg) rotateX(8deg);">Product Development</span>
  <span class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-purple-700 transform transition duration-300 hover:scale-110 hover:rotate-2" style="perspective: 1000px; transform: rotateY(10deg) rotateX(-6deg);">Financial Reporting</span>
  <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-pink-700 transform transition duration-300 hover:scale-110 hover:-rotate-2" style="perspective: 1000px; transform: rotateY(-8deg) rotateX(4deg);">Operational Efficiency</span>
  <span class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-indigo-700 transform transition duration-300 hover:scale-110 hover:rotate-5" style="perspective: 1000px; transform: rotateY(12deg) rotateX(-2deg);">Market Trends</span>
</div>
              

                <div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-8">
    <div class="relative overflow-hidden">
        <video class="w-full h-auto" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mt-1">This is a short description of the video content. It provides useful information about what the viewer can expect.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <div>
                <p class="text-gray-800 dark:text-white">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Uploaded</p>
            </div>
        </div>
    </div>
</div>
              

                <button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>
              

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg py-4 fixed w-full z-10">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 rounded-lg" />
            <h1 class="text-lg text-white font-bold">ShopEasy</h1>
        </div>
        <div class="hidden md:flex md:space-x-8">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Products</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">About Us</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="h-8 w-8 rounded-full" />
            </a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Cart</button>
        </div>
    </div>
</nav>

<main class="pt-24">
    <h2 class="text-3xl text-gray-800 dark:text-gray-200 text-center my-8">Welcome to ShopEasy!</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-8">Discover amazing products with unbeatable prices.</p>
    <div class="flex justify-center space-x-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="rounded-lg shadow-md" />
    </div>
</main>
              

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-900 dark:to-indigo-800 rounded-lg shadow-lg max-w-md w-full">
    <h2 class="text-white text-2xl font-bold mb-4">Verify You're Human</h2>
    <img src="https://picsum.photos/400/200?random=1" alt="Nostalgic Background" class="rounded-lg mb-4" />
    <div class="flex flex-col items-center text-center mb-4">
        <p class="text-white mb-2">To continue, please solve the puzzle below:</p>
        <div class="flex flex-row space-x-2 bg-white p-2 rounded-lg shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-violet-500 dark:border-violet-300" />
            <p class="text-gray-800 font-semibold">Identify the vintage item:</p>
            <img src="https://picsum.photos/100/100?random=2" alt="Vintage Item" class="w-10 h-10 rounded-lg border-2 border-pink-500 dark:border-pink-300" />
        </div>
    </div>
    <input type="text" placeholder="Your Answer" class="w-full p-2 text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 rounded-lg mb-4" />
    <button class="bg-fuchsia-500 hover:bg-fuchsia-600 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-800 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out">Submit</button>
</div>
              

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:text-white">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Previous
  </a>
  <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md dark:bg-indigo-600 dark:text-white dark:border-indigo-700">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    3
  </a>
  <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
    ...
  </span>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    8
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    9
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    10
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Next
  </a>
</nav>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Blog Post Title</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>This is a simple interactive component designed for blog content, featuring a Glassmorphism style with pastel colors.</p>
            <p>It is responsive and supports dark mode.</p>
          </div>
          <div class="pt-4 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <a href="#" class="text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-500">Read More &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

                ```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <!-- 360 Viewer Area (Placeholder) -->
    <div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
      <span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
      <!-- In a real implementation, a JavaScript library or iframe would go here -->
    </div>

    <!-- Product Info -->
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
      <div class="flex justify-between items-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
        <button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
      </div>
    </div>
  </div>
</div>
```
              

                <div class="max-w-4xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Example Heat Map Item -->
        <div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
        </div>
        <div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
        </div>
        <div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
        </div>
        <!-- Add more items as needed -->
    </div>
</div>