Search Components

All Components

Browse all available Tailwind CSS components

Wishlist_Component

A complex, triadic-colored, corporate/professional wishlist component suitable for a dashboard, featuring responsive design and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 sm:mb-8 text-center sm:text-left">
      Your Wishlist
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Filter/Sort Sidebar for larger screens -->
      <aside class="md:col-span-1 hidden md:block">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 space-y-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters & Sort</h3>

          <div>
            <label for="sort-by" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
            <select id="sort-by" class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 dark:text-gray-100">
              <option>Date Added (Newest)</option>
              <option>Price (Low to High)</option>
              <option>Price (High to Low)</option>
              <option>Alphabetical (A-Z)</option>
            </select>
          </div>

          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</p>
            <div class="space-y-2">
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Electronics</span>
              </label>
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Home Goods</span>
              </label>
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Books</span>
              </label>
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Apparel</span>
              </label>
            </div>
          </div>

          <div>
            <label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer thumb-blue-500 dark:thumb-blue-400">
            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
              <span>$0</span>
              <span>$1000+</span>
            </div>
          </div>

          <button class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Apply Filters
          </button>
        </div>
      </aside>

      <!-- Main content area for wishlist items -->
      <div class="md:col-span-2 lg:col-span-3">
        <!-- Responsive Filter/Sort Bar for smaller screens -->
        <div class="flex flex-col sm:flex-row justify-between items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-6 md:hidden border border-gray-200 dark:border-gray-700">
          <div class="w-full sm:w-1/2 mb-4 sm:mb-0">
            <label for="mobile-sort-by" class="sr-only">Sort By</label>
            <select id="mobile-sort-by" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 dark:text-gray-100">
              <option>Sort By: Date Added</option>
              <option>Sort By: Price (Low to High)</option>
              <option>Sort By: Price (High to Low)</option>
              <option>Sort By: Alphabetical (A-Z)</option>
            </select>
          </div>
          <button class="w-full sm:w-auto flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
            Apply Filters
          </button>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Wishlist Item 1 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1015/400/250" alt="Modern Office Chair" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Ergonomic Office Chair</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Ultra-comfortable design for long work hours.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$299.99</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 2 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/237/400/250" alt="Noise Cancelling Headphones" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Noise-Cancelling Headphones</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive audio experience with superior comfort.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$189.00</span>
                <span class="text-sm text-red-500 dark:text-red-400">Out of Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-gray-400 cursor-not-allowed text-white text-sm rounded-md shadow-md focus:outline-none" disabled>
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 3 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1020/400/250" alt="Smartwatch" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Advanced Smartwatch</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Track your fitness and stay connected.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$349.50</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 4 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1025/400/250" alt="Professional Monitor" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">4K Ultra HD Monitor</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Crisp visuals for productivity and entertainment.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$499.00</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 5 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1018/400/250" alt="Mechanical Keyboard" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Gaming Mechanical Keyboard</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Tactile feedback for ultimate typing and gaming.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$129.99</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 6 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/seed/picsum/400/250" alt="Wireless Mouse" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Ergonomic Wireless Mouse</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Precision and comfort for all-day use.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$59.99</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

        </div>

        <!-- Pagination/Load More Button -->
        <div class="mt-8 flex justify-center">
          <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium rounded-md shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Load More Items
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

ArtDecoProgressIndicator

A complex Art Deco inspired progress indicator component for job/career platforms, featuring geometric patterns, luxurious styling, and complementary colors. Fully responsive with dark mode support.

Open Preview

                <div class="font-sans bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6 md:p-10 lg:p-16 antialiased">
  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 transform -rotate-2 selection:bg-yellow-200 selection:text-black dark:selection:bg-yellow-800 dark:selection:text-white transition-colors duration-300">
    <span class="block bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text drop-shadow-lg">Your Career Journey</span>
    <span class="block text-2xl md:text-3xl text-gray-600 dark:text-gray-400 mt-2 tracking-wide">Progress Overview</span>
  </h2>

  <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Column: Overall Progress -->
    <div class="lg:col-span-1 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
      <div class="p-6 md:p-8 flex flex-col justify-between h-full">
        <div>
          <div class="text-center mb-8">
            <div class="relative w-48 h-48 mx-auto mb-4">
              <svg class="w-full h-full transform rotate-[-90deg]" viewBox="0 0 100 100">
                <circle class="text-gray-200 dark:text-gray-700 stroke-current" stroke-width="6" cx="50" cy="50" r="40" fill="transparent"></circle>
                <circle class="text-yellow-500 stroke-current progress-circle transition-all duration-1000 ease-out" stroke-width="6" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="calc(2.51 * 75) 251"></circle>
              </svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-5xl font-bold bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text">75%</span>
                <span class="text-lg text-gray-600 dark:text-gray-400">Completed</span>
              </div>
            </div>
            <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Overall Completion</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Your journey unfolds with great progress.</p>
          </div>

          <div class="space-y-4">
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Profile Setup: <span class="font-semibold text-gray-800 dark:text-gray-200">100%</span></span>
              <!-- Example of a small progress bar for sub-sections -->
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-blue-500 dark:bg-blue-400 h-full rounded-full" style="width: 100%;"></div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-green-500 dark:bg-green-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Skills & Experience: <span class="font-semibold text-gray-800 dark:text-gray-200">80%</span></span>
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-green-500 dark:bg-green-400 h-full rounded-full" style="width: 80%;"></div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Job Applications: <span class="font-semibold text-gray-800 dark:text-gray-200">60%</span></span>
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-purple-500 dark:bg-purple-400 h-full rounded-full" style="width: 60%;"></div>
              </div>
            </div>
          </div>
        </div>

        <button class="mt-8 w-full py-3 px-6 rounded-lg bg-yellow-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-yellow-500 text-white font-bold text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-amber-800">
          View Full Details
        </button>
      </div>
    </div>

    <!-- Right Columns: Milestones & Challenges -->
    <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Milestones Card -->
      <div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
        <h3 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-cyan-600 dark:from-blue-400 dark:to-cyan-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-blue-200 dark:border-cyan-700 text-center md:text-left">🚀 Milestones Achieved</h3>
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Profile Completed</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">All essential information filled on 2023-10-26.</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-cyan-500 dark:bg-cyan-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <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="M5 13l4 4L19 7" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">First 5 Applications</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Successfully applied to 5 jobs on 2023-11-01.</p>
            </div>
          </div>
          <div class="flex items-start opacity-70">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-600 dark:text-gray-400 text-xl font-bold mr-4 shadow-md">
              <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-700 dark:text-gray-300 text-lg">Awaiting Interview Invite</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Next milestone: confirm an interview request.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Challenges Card -->
      <div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
        <h3 class="text-3xl font-bold bg-gradient-to-r from-red-500 to-orange-600 dark:from-red-400 dark:to-orange-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-red-200 dark:border-orange-700 text-center md:text-left">⚠️ Pending Actions</h3>
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-red-500 dark:bg-red-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Update Resume</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Your resume may need updates for relevance. <a href="#" class="text-red-500 hover:underline dark:text-red-400">Action Required</a></p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-500 dark:bg-orange-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <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="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" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Review Notifications</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">You have 3 unread messages from recruiters. <a href="#" class="text-orange-500 hover:underline dark:text-orange-400">Check Now</a></p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-500 dark:bg-green-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Add Cover Letter</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Enhance your application for 'Senior Dev Role' job. <a href="#" class="text-green-500 hover:underline dark:text-green-400">Upload Here</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Avatar & CTA card -->
    <div class="lg:col-span-3 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden p-6 md:p-8 flex flex-col md:flex-row items-center justify-between mt-8 transform hover:scale-[1.005] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
      <div class="flex items-center space-x-6 mb-6 md:mb-0">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-4 border-yellow-400 dark:border-amber-600 shadow-lg">
        <div>
          <p class="text-3xl font-extra-bold bg-gradient-to-r from-teal-500 to-lime-600 dark:from-teal-400 dark:to-lime-500 text-transparent bg-clip-text">Keep Up The Great Work!</p>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Stay focused on your career goals.</p>
        </div>
      </div>
      <button class="py-4 px-8 rounded-full bg-teal-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-teal-500 text-white font-bold text-xl shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-lime-800">
        Explore New Opportunities
      </button>
    </div>

  </div>
</div>

<style>
  /* Custom CSS for the circular progress bar animation */
  .progress-circle {
    transform-origin: center;
    transition: stroke-dasharray 1s ease-out;
    stroke-dashoffset: 0;
  }

  /* Art Deco inspired background patterns */
  .bg-gray-50 {
    background-image: radial-gradient(circle at 100% 150%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 150%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 50%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 50%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 0%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 0%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 100%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 0%, #fefce8, rgba(255,255,255,0) 50%);
    background-size: 80px 80px;
    background-position: 0 0, 80px 80px, 80px 0, 0 80px;
  }

  .dark .bg-gray-900 {
    background-image: radial-gradient(circle at 100% 150%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 150%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 50%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 50%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 0%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 0%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 100%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 0%, #2f344f, rgba(0,0,0,0) 50%);
    background-size: 80px 80px;
    background-position: 0 0, 80px 80px, 80px 0, 0 80px;
  }

  .bg-gray-850 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 40 49 / var(--tw-bg-opacity)); /* Slightly lighter than gray-900 for card background */
  }

  .dark .bg-gray-850 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 40 49 / var(--tw-bg-opacity));
  }

  /* Glowing effect for specific backgrounds */
  .dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px -10px rgba(255, 255, 0, 0.2);
  }

  .selection\:bg-yellow-200::selection {
    background-color: var(--tw-selection-background-color, #fef08a);
  }
  .selection\:text-black::selection {
    color: var(--tw-selection-color, #000);
  }
  .dark .selection\:bg-yellow-800::selection {
    background-color: var(--tw-selection-background-color, #92400e);
  }
  .dark .selection\:text-white::selection {
    color: var(--tw-selection-color, #fff);
  }
</style>

Swiss_International_Typography_Content_Display_Component

A clean, minimalist content display component for dashboards, emphasizing typography and grid systems with cool neutral colors and full responsiveness.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">

  <!-- Component Header -->
  <div class="mb-6 lg:mb-8">
    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-light tracking-tight text-gray-900 dark:text-gray-100 mb-2">Dashboard Overview</h1>
    <p class="text-gray-600 dark:text-gray-400 text-lg">A concise summary of key metrics and recent activities.</p>
  </div>

  <!-- Grid Layout for Content Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">

    <!-- Metric Card 1: Sales -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Total Sales</h2>
          <svg class="w-6 h-6 text-blue-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1L21 6m-4 14l2-2m-3-19v5m-1.5-6h.025A20.307 20.307 0 0110 21.886V1.114c3.784-.526 7.427.674 10.59 3.447L21 6m-4 14h.025M21 6l-2 2m-7 1.5.5.5V12M12 8h.01V6M12 11.5l1.5-1.5m-3 0L9 10m-2 2V6"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month</p>
      </div>
    </div>

    <!-- Metric Card 2: New Users -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">New Users</h2>
          <svg class="w-6 h-6 text-green-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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-7.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">897</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+12.8% from last week</p>
      </div>
    </div>

    <!-- Metric Card 3: Orders Pending -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Orders Pending</h2>
          <svg class="w-6 h-6 text-yellow-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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">42</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Requires immediate action</p>
      </div>
    </div>

    <!-- Metric Card 4: Retention Rate -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Retention Rate</h2>
          <svg class="w-6 h-6 text-purple-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="M7 12l3-3 3 3 4-4M18 10h4M3 4h18M3 10h18M3 16h18M3 20h18"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">78.5%</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Target: 80%</p>
      </div>
    </div>

    <!-- Recent Activity Feed -->
    <div class="lg:col-span-2 xl:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe <span class="font-normal text-gray-500 dark:text-gray-400">updated profile.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">15 minutes ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-500 dark:text-gray-400">completed an order #1023.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Robert Johnson <span class="font-normal text-gray-500 dark:text-gray-400">added a new product.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White <span class="font-normal text-gray-500 dark:text-gray-400">replied to a support ticket.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Quick Stats Breakdown -->
    <div class="lg:col-span-1 xl:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Quick Stats</h2>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Monthly Revenue</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">$5,800</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Active Subscriptions</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">2,100</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Customer Satisfaction</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">92%</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Website Visitors (Today)</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">1,450</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Generic Information Card with Image -->
    <div class="lg:col-span-1 xl:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Project Progress</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Monitor the status of your ongoing projects and milestones.</p>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-blue-500 h-2.5 rounded-full" style="width: 70%"></div>
        </div>
        <p class="text-right text-xs mt-2 text-gray-500 dark:text-gray-400">70% Completed</p>
      </div>
    </div>

    <!-- Generic Information Card without Image -->
    <div class="lg:col-span-1 xl:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">System Health</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">All systems are operational. No critical issues detected.</p>
        <div class="bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs font-semibold px-2.5 py-0.5 rounded-full inline-flex items-center">
          <span class="h-2 w-2 rounded-full bg-green-500 mr-1"></span> Operational
        </div>
        <p class="text-xs mt-3 text-gray-500 dark:text-gray-400">Last checked: 2 minutes ago</p>
      </div>
    </div>

  </div>
</div>

360_Viewer_Component

A complex 360-degree property viewer component for real estate platforms, featuring a monospace/developer design, retro/vintage color palette, and full responsiveness with dark mode support.

Open Preview

                <div class="font-mono bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-6xl mx-auto border border-gray-300 dark:border-gray-700">

  <!-- Header: Component Title and Status -->
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-gray-400 dark:border-gray-600 pb-4">
    <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 uppercase tracking-wide mb-2 sm:mb-0">
      <span class="text-cyan-600 dark:text-cyan-400">//</span> PROPERTY_VIEWER<span class="animate-pulse text-red-500">_LIVE</span>
    </h2>
    <div class="flex items-center text-sm sm:text-base">
      <span class="mr-2 text-green-600 dark:text-green-400">STATUS: OK</span>
      <span class="text-yellow-600 dark:text-yellow-400">[BUILD: 2023.10.26]</span>
    </div>
  </div>

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

    <!-- Main Viewer Area -->
    <div class="md:col-span-2 bg-gray-200 dark:bg-gray-800 rounded-lg p-3 sm:p-4 border border-gray-300 dark:border-gray-700 shadow-inner overflow-hidden relative aspect-video">
      <div class="w-full h-full bg-cover bg-center rounded-md" style="background-image: url('https://picsum.photos/1000/600?random=1&blur=2');">
        <div class="h-full w-full flex items-center justify-center bg-black bg-opacity-20">
          <span class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-widest uppercase">VIEW_360°_ACTIVE</span>
        </div>
      </div>

      <!-- Interactive Controls Overlay -->
      <div class="absolute bottom-3 left-3 right-3 p-3 sm:p-4 bg-gray-800 bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80 rounded-lg flex flex-wrap justify-center sm:justify-between items-center space-x-2 sm:space-x-4">

        <div class="flex space-x-2">
          <button class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-cyan-700 dark:border-cyan-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> ZOOM<span class="hidden lg:inline">_IN</span>
          </button>
          <button class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-cyan-700 dark:border-cyan-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> ZOOM<span class="hidden lg:inline">_OUT</span>
          </button>
        </div>

        <div class="flex space-x-2 mt-2 sm:mt-0">
          <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-indigo-700 dark:border-indigo-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> FLOOR<span class="hidden lg:inline">_PLAN</span>
          </button>
          <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-indigo-700 dark:border-indigo-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> NEXT<span class="hidden lg:inline">_ROOM</span>
          </button>
        </div>

        <input type="range" min="0" max="100" value="50" class="w-24 sm:w-32 lg:w-48 h-2 bg-gray-600 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg transition duration-200 ease-in-out mt-2 sm:mt-0">
      </div>

    </div>

    <!-- Sidebar / Property Details & Thumbnails -->
    <div class="md:col-span-1 flex flex-col space-y-6">

      <!-- Property Details -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 lg:p-5 border border-gray-300 dark:border-gray-700 shadow-lg">
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 uppercase tracking-wide">
          <span class="text-purple-600 dark:text-purple-400">//</span> PROPERTY_DETAILS
        </h3>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">ID:</span> <span class="tracking-wide">#4815162342</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">TYPE:</span> <span class="tracking-wide">CONDO_UNIT</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">SIZE:</span> <span class="tracking-wide">1200_SQFT</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">BEDS:</span> <span class="tracking-wide">3</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">BATHS:</span> <span class="tracking-wide">2.5</span></p>
        <p class="text-sm"><span class="text-yellow-600 dark:text-yellow-400">PRICE:</span> <span class="tracking-wide">$_349,000</span></p>
      </div>

      <!-- Thumbnail Navigation -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 lg:p-5 border border-gray-300 dark:border-gray-700 shadow-lg">
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 uppercase tracking-wide">
          <span class="text-fuchsia-600 dark:text-fuchsia-400">//</span> ROOM_SELECT
        </h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-3">
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">LIVING_RM</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">KITCHEN</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent border-cyan-500 shadow-md transform scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
              <span class="text-white text-sm font-semibold">MASTER_BD</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">BATHROOM</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">BALCONY</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">DINING_RM</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Footer: Agent Info and System Message -->
  <div class="mt-6 pt-4 border-t border-gray-400 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
    <div class="flex items-center mb-4 sm:mb-0">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Agent Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-500">
      <div>
        <p class="text-sm text-gray-900 dark:text-gray-100"><span class="text-green-600 dark:text-green-400">AGENT:</span> <span class="font-bold">JOHN_DOE</span></p>
        <p class="text-xs text-gray-600 dark:text-gray-400"><span class="text-green-600 dark:text-green-400">CONTACT:</span> +1.555.VIEW.360</p>
      </div>
    </div>
    <p class="text-xs text-gray-500 dark:text-gray-400">SYSTEM: Ready. Awaiting user input. <span class="animate-pulse text-gray-600 dark:text-gray-300">_</span></p>
  </div>

</div>

Tabs Component - Job/Career

A responsive tabs component with a Material Design aesthetic and pastel color scheme, suitable for job boards or career platforms. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <nav class="-mb-px flex space-x-0 sm:space-x-4 md:space-x-6 text-sm sm:text-base md:text-lg" aria-label="Tabs">
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 font-medium text-purple-600 dark:text-purple-400 border-purple-500 dark:border-purple-400 whitespace-nowrap hover:text-purple-700 dark:hover:text-purple-300 transition duration-200 ease-in-out" aria-current="page">
          <span class="block">Available Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Applied Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Saved Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Interviews</span>
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-6">Available Job Listings</h2>
      <div class="grid gap-6">

        <!-- Job Card 1 -->
        <div class="bg-violet-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-violet-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-violet-800 dark:text-violet-300">Senior Frontend Developer</h3>
              <p class="text-gray-600 dark:text-gray-400">Acme Corporation - San Francisco, CA</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Full-time, Remote-friendly</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100">
                New
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$120k - $150k</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">We are looking for a highly skilled Senior Frontend Developer to join our dynamic team. You will be responsible for building cutting-edge web applications using modern JavaScript frameworks...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">React</span>
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">TypeScript</span>
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">Tailwind CSS</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

        <!-- Job Card 2 -->
        <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-blue-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-300">Product Manager, AI/ML</h3>
              <p class="text-gray-600 dark:text-gray-400">GlobalTech Inc. - Seattle, WA</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Full-time</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-100">
                Hot
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$130k - $170k</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">Seeking an experienced Product Manager with a strong background in AI/ML to lead our next-generation product initiatives. You will work closely with engineering, design, and research teams...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Product Management</span>
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Artificial Intelligence</span>
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Machine Learning</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

        <!-- Job Card 3 -->
        <div class="bg-pink-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-pink-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-pink-800 dark:text-pink-300">UI/UX Designer</h3>
              <p class="text-gray-600 dark:text-gray-400">Creative Solutions - New York, NY</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Contract, On-site</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100">
                Urgent
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$70/hr - $90/hr</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">Join our team as a UI/UX Designer to craft intuitive and beautiful user experiences. You will be responsible for the full design process from wireframing to high-fidelity prototypes...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">Figma</span>
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">User Research</span>
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">Prototyping</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

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

Corporate/Professional Gallery Component

A responsive and versatile image gallery component with a corporate/professional aesthetic, using a forest/green color palette. Designed for educational platforms, it provides a clean and trustworthy interface with dark mode support.

Open Preview

                <section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10 sm:mb-16">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-4">
        Explore Our Learning Resources
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into our extensive collection of educational materials, designed to enhance your learning journey.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Course thumbnail depicting a calm lake with mountains">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Web Development</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Foundations of Modern Web Design</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Master the core principles of responsive web design using HTML5, CSS3, and modern frameworks.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$49.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1015/600/400" alt="Course thumbnail depicting a camera and coffee">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Digital Marketing</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Advanced SEO Strategies for Growth</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Learn to boost your online visibility and drive organic traffic with proven SEO tactics.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Jane Smith</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$69.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1/600/400" alt="Course thumbnail depicting office supplies and a laptop">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Business & Finance</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Financial Modeling & Analysis</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Build robust financial models and make informed decisions with this comprehensive course.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Robert Johnson</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$89.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/20/600/400" alt="Course thumbnail depicting a network hub">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">IT & Software</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Cybersecurity Fundamentals</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Understand the threats and learn to protect digital systems and networks from attacks.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Emily White</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$79.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/29/600/400" alt="Course thumbnail depicting a book and coffee">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Personal Development</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Effective Communication Skills</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Enhance your interpersonal skills and learn to communicate clearly and persuasively.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Michael Green</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$39.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/30/600/400" alt="Course thumbnail depicting painting supplies">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Arts & Crafts</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Digital Painting</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Unlock your creativity and learn the techniques of digital painting using popular software.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Sophia Lee</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$59.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1005/600/400" alt="Course thumbnail depicting a forest and lake">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Nature & Environment</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Sustainable Living Practices</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Discover eco-friendly habits and contribute to a healthier planet.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">David Clark</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">Free</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1041/600/400" alt="Course thumbnail depicting a brain scan">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Science & Health</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Neuroscience</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Explore the complexities of the human brain and nervous system in this introductory course.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Olivia Brown</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$74.99</span>
          </div>
        </div>
      </div>

    </div>

    <!-- Call to action / Category filter below the grid -->
    <div class="mt-10 sm:mt-16 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 dark:focus:ring-offset-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-200">
        View All Courses
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

  </div>
</section>

360_viewer_component

A complex 360° product viewer component with an industrial, raw aesthetic using a purple/violet color scheme, suitable for a portfolio. Features interactive elements, responsive design, and dark mode support.

Open Preview

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

  <div class="w-full max-w-6xl rounded-lg shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-800 to-indigo-900 dark:from-gray-800 dark:to-gray-900
              border-4 border-purple-900 dark:border-gray-700
              text-gray-100 dark:text-gray-200">

    <!-- Header & Controls -->
    <div class="p-4 sm:p-6 border-b-2 border-purple-900 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-200 dark:text-gray-100 uppercase tracking-wide">
        Product Viewer
      </h2>
      <div class="flex items-center space-x-3">
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex flex-col lg:flex-row">
      <!-- 360 Viewer Section (Left/Top) -->
      <div class="lg:w-3/4 p-4 sm:p-6 lg:p-8 border-b-2 lg:border-b-0 lg:border-r-2 border-purple-900 dark:border-gray-700 relative">
        <div class="aspect-w-16 aspect-h-9 bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden border-2 border-purple-700 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/id/1018/1200/675" alt="Product 360 view" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy">
          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-16 h-16 text-white text-opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <!-- 360 Control Bar -->
        <div class="flex justify-center items-center mt-6 space-x-2">
          <button class="p-2 rounded-lg bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 text-purple-200 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0V9.414L10 12.586 6.707 9.414V15.707a1 1 0 01-1.414 0L.586 10l.585-.586a1 1 0 011.415 0L5 12.414v-5.828a1 1 0 112 0v5.828l2.586-2.586A1 1 0 0110 9a1 1 0 01.707.293L12 11.586V5.414a1 1 0 112 0v5.828l2.586-2.586a1 1 0 011.415 0l.585.586a1 1 0 010 1.414l-5 5z" clip-rule="evenodd"></path></svg>
          </button>
          <input type="range" min="0" max="359" value="180" class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-purple-600 dark:bg-gray-600 focus:outline-none
            [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-300 [&::-webkit-slider-thumb]:dark:bg-gray-300 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:appearance-none
            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-300 [&::-moz-range-thumb]:dark:bg-gray-300 [&::-moz-range-thumb]:shadow-lg">
          <button class="p-2 rounded-lg bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 text-purple-200 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0V9.414L10 12.586 6.707 9.414V15.707a1 1 0 01-1.414 0L.586 10l.585-.586a1 1 0 011.415 0L5 12.414v-5.828a1 1 0 112 0v5.828l2.586-2.586A1 1 0 0110 9a1 1 0 01.707.293L12 11.586V5.414a1 1 0 112 0v5.828l2.586-2.586a1 1 0 011.415 0l.585.586a1 1 0 010 1.414l-5 5z" clip-rule="evenodd"></path></svg>
          </button>
        </div>

        <!-- Hotspots/Annotations (placeholder) -->
        <div class="absolute top-1/4 left-1/4 p-1.5 bg-purple-500 rounded-full cursor-pointer border-2 border-purple-300 z-10 animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
        <div class="absolute bottom-1/3 right-1/4 p-1.5 bg-purple-500 rounded-full cursor-pointer border-2 border-purple-300 z-10 animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
      </div>

      <!-- Product Details & Controls (Right/Bottom) -->
      <div class="lg:w-1/4 p-4 sm:p-6 lg:p-8 flex flex-col gap-6">
        <div class="flex-1">
          <h3 class="text-2xl sm:text-3xl font-bold text-purple-100 dark:text-gray-100 mb-3">Industrial Cogwheel</h3>
          <p class="text-purple-200 dark:text-gray-300 text-sm mb-4 leading-relaxed tracking-wide">
            Crafted from reinforced steel, this cogwheel exhibits precise engineering and robust durability, ideal for heavy machinery applications.
          </p>
          
          <div class="text-lg mb-4">
            <span class="text-purple-300 dark:text-gray-400">Model ID:</span> <span class="font-semibold text-white dark:text-gray-200">XYZ789-A</span>
          </div>

          <div class="mb-6">
            <h4 class="text-xl font-semibold text-purple-200 dark:text-gray-200 mb-2">Key Features:</h4>
            <ul class="list-disc list-inside text-purple-200 dark:text-gray-300 text-sm space-y-1">
              <li>High-strength alloy construction</li>
              <li>Precision-machined teeth</li>
              <li>Corrosion-resistant coating</li>
              <li>Optimized for torque transfer</li>
            </ul>
          </div>
        </div>

        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 border-2 border-purple-600 dark:border-gray-600 rounded-lg text-lg font-bold uppercase
                         bg-purple-700 dark:bg-gray-700 text-purple-100 dark:text-gray-100
                         hover:bg-purple-600 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 10a7.001 7.001 0 00-6-6.93V4a1 1 0 00-2 0v.07A7.001 7.001 0 003 10a7.001 7.001 0 006 6.93V17a1 1 0 102 0v-.07z" clip-rule="evenodd"></path></svg>
            Request Quote
          </button>
          <button class="w-full flex items-center justify-center px-6 py-3 border-2 border-purple-500 dark:border-gray-500 rounded-lg text-lg font-bold uppercase
                         bg-transparent text-purple-200 dark:text-gray-200
                         hover:bg-purple-800 dark:hover:bg-gray-800 transition duration-300 transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
            Download Specs
          </button>
        </div>

      </div>
    </div>

  </div>

</div>

Audio Player Component

A complex, minimalist audio player component with a retro/vintage color scheme, designed for dating/social platforms. Features include playback controls, progress bar, volume control, track information, and dark mode support.

Open Preview

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

  <!-- Audio Player Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-stone-300 dark:border-stone-700">

    <!-- Header / Track Info -->
    <div class="p-6 flex flex-col items-center text-center">
      <div class="w-32 h-32 md:w-40 md:h-40 rounded-lg shadow-lg mb-4 overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <p class="text-xs text-stone-600 dark:text-stone-400 uppercase tracking-widest mb-1">Playing from your matches</p>
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate max-w-full">Echoes of Your Smile</h2>
      <p class="text-base text-stone-700 dark:text-stone-300 mb-4 truncate max-w-full">Melody Muses ft. Rhythmic Soul</p>
    </div>

    <!-- Playback Controls and Progress Bar -->
    <div class="px-6 pb-6 pt-2">
      <!-- Progress Bar -->
      <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 mb-5 overflow-hidden group">
        <div class="w-3/4 bg-amber-600 h-2.5 rounded-full transition-all duration-1000 ease-out group-hover:w-[85%]" style="width: 75%;"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs font-mono text-stone-600 dark:text-stone-400 mb-6">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-around mb-8">
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 11.2a1 1 0 0 0-1.4 0L14 13.9V6a1 1 0 0 0-2 0v7.9l-2.9-2.7a1 1 0 0 0-1.4 1.4l4 3.7c.4.4 1 .4 1.4 0l4-3.7a1 1 0 0 0 0-1.4z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="p-4 rounded-full bg-amber-600 text-white shadow-lg transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 5v14l12-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 5v14l-11-7z"/></svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.7 12.8a1 1 0 0 0 1.4 0L10 10.1v7.9a1 1 0 0 0 2 0v-7.9l2.9 2.7a1 1 0 0 0 1.4-1.4l-4-3.7c-.4-.4-1-.4-1.4 0l-4 3.7a1 1 0 0 0 0 1.4z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
      </div>

      <!-- Volume Control -->
      <div class="flex items-center gap-4 text-stone-700 dark:text-stone-300 mb-6">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 5L6 9H2v6h4l5 4V5zm7.5 7c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM19 12c0 2.98-2.59 5.4-5.5 5.4v-10.8c2.91 0 5.5 2.42 5.5 5.4z"/>
        </svg>
        <input type="range" min="0" max="100" value="75" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 accent-amber-600 transition-colors duration-200">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM19 12c0 2.98-2.59 5.4-5.5 5.4v-10.8c2.91 0 5.5 2.42 5.5 5.4z"/>
        </svg>
      </div>

      <!-- Social Interaction Buttons -->
      <div class="flex items-center justify-between mt-4">
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          <span>Like</span>
        </button>
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 9h10V7H7v2zm0 4h10v-2H7v2zm0 4h7v-2H7v2z"/></svg>
          <span>Lyrics</span>
        </button>
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.57-2.7a3.5 3.5 0 0 0 0-1.59l4.57-2.7a2.99 2.99 0 0 0 1.96.79c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .17.02.34.05.51L10.3 11.2a3.48 3.48 0 0 0-2.3-1.28c-1.66 0-3 1.34-3 3s1.34 3 3 3c.89 0 1.7-.39 2.29-1.02l4.45 2.65c-.03.17-.05.34-.05.51 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
          <span>Share</span>
        </button>
      </div>
    </div>

    <!-- Next Song Suggestion (for dating/social context) -->
    <div class="p-6 bg-stone-300 dark:bg-stone-800 border-t border-stone-400 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full object-cover shadow-md border-2 border-amber-600">
        <div>
          <p class="text-sm text-stone-700 dark:text-stone-300">Next from:</p>
          <p class="font-semibold text-stone-800 dark:text-stone-200">Alex R.</p>
        </div>
      </div>
      <button class="px-4 py-2 text-sm bg-amber-600 text-white rounded-full shadow-md hover:bg-amber-700 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
        Message
      </button>
    </div>

  </div>

</div>

NonProfit_Retro_Accordion

A complex, retro-themed accordion component designed for non-profit/charity websites, featuring muted color gradients, smooth transitions, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-orange-100 via-stone-200 to-amber-100 dark:from-stone-900 dark:via-gray-800 dark:to-stone-700 min-h-screen font-sans">
  <div class="max-w-3xl mx-auto bg-white/70 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden dark:bg-stone-800/80 transition-colors duration-500">
    <div class="p-6 sm:p-8 border-b-2 border-dashed border-orange-200 dark:border-stone-700">
      <h2 class="text-3xl sm:text-4xl font-bold text-stone-800 dark:text-orange-100 mb-2 font-serif tracking-tight">Our Mission & Impact</h2>
      <p class="text-md sm:text-lg text-gray-700 dark:text-stone-300">Explore how your contributions make a difference in our community.</p>
    </div>
    <div class="divide-y divide-orange-200/50 dark:divide-stone-700/50">
      <!-- Accordion Item 1 -->
      <div class="group relative overflow-hidden">
        <input type="checkbox" id="accordion-1" class="absolute peer opacity-0 top-0 left-0 w-full h-full cursor-pointer z-10" />
        <label for="accordion-1" class="flex items-center justify-between p-6 sm:p-8 cursor-pointer active:scale-[0.99] transition-all duration-300 select-none bg-gradient-to-r from-orange-50 to-stone-100 dark:from-stone-800 dark:to-gray-700 group-hover:from-orange-100 group-hover:to-orange-50 dark:group-hover:from-stone-700 dark:group-hover:to-gray-600">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-200 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">What is our primary focus?</h3>
          <svg class="w-6 h-6 text-orange-500 dark:text-orange-300 transform transition-transform duration-300 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 peer-checked:max-h-96 transition-all duration-500 ease-in-out overflow-hidden px-6 sm:px-8 bg-stone-50 dark:bg-stone-900/50">
          <div class="py-5 text-gray-600 dark:text-stone-300 text-base leading-relaxed">
            <p class="mb-3">Our primary focus is on providing essential resources and educational opportunities to underprivileged communities. We believe in empowering individuals through knowledge and support, fostering long-term sustainable growth.</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Community support scene" class="rounded-lg shadow-md mb-3 object-cover w-full h-auto max-h-48 sm:max-h-60" loading="lazy">
            <p>Through various programs, we address critical needs such as food security, access to clean water, and basic healthcare. Learn more about our initiatives <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-orange-300 underline font-medium transition-colors duration-200">here</a>.</p>
          </div>
        </div>
      </div>

      <!-- Accordion Item 2 -->
      <div class="group relative overflow-hidden">
        <input type="checkbox" id="accordion-2" class="absolute peer opacity-0 top-0 left-0 w-full h-full cursor-pointer z-10" />
        <label for="accordion-2" class="flex items-center justify-between p-6 sm:p-8 cursor-pointer active:scale-[0.99] transition-all duration-300 select-none bg-gradient-to-r from-orange-50 to-stone-100 dark:from-stone-800 dark:to-gray-700 group-hover:from-orange-100 group-hover:to-orange-50 dark:group-hover:from-stone-700 dark:group-hover:to-gray-600">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-200 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">How can I contribute to your cause?</h3>
          <svg class="w-6 h-6 text-orange-500 dark:text-orange-300 transform transition-transform duration-300 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 peer-checked:max-h-96 transition-all duration-500 ease-in-out overflow-hidden px-6 sm:px-8 bg-stone-50 dark:bg-stone-900/50">
          <div class="py-5 text-gray-600 dark:text-stone-300 text-base leading-relaxed">
            <p class="mb-3">There are several ways to contribute, including direct donations, volunteering your time, or spreading awareness about our mission. Every act of kindness helps us reach more people in need.</p>
            <ul class="list-disc list-inside space-y-2 mb-4">
              <li class="flex items-start"><span class="mr-2 text-amber-600 dark:text-amber-400 font-bold text-lg">&bull;</span> Online Donation: Securely donate through our website.</li>
              <li class="flex items-start"><span class="mr-2 text-amber-600 dark:text-amber-400 font-bold text-lg">&bull;</span> Volunteer Programs: Join our dedicated team of volunteers for various events.</li>
              <li class="flex items-start"><span class="mr-2 text-amber-600 dark:text-amber-400 font-bold text-lg">&bull;</span> Corporate Partnerships: Explore collaboration opportunities for businesses.</li>
            </ul>
            <div class="flex items-center space-x-4 mb-3">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Volunteer avatar" class="w-12 h-12 rounded-full border-2 border-orange-300 dark:border-stone-600" loading="lazy">
              <p class="text-sm text-gray-500 dark:text-stone-400">"My experience volunteering has been incredibly rewarding." - John, Volunteer</p>
            </div>
            <button class="px-5 py-2 mt-2 bg-gradient-to-r from-orange-500 to-amber-600 text-white rounded-lg shadow-md hover:from-orange-600 hover:to-amber-700 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-opacity-75 transition-all duration-300 text-sm sm:text-base">Donate Now</button>
          </div>
        </div>
      </div>

      <!-- Accordion Item 3 -->
      <div class="group relative overflow-hidden">
        <input type="checkbox" id="accordion-3" class="absolute peer opacity-0 top-0 left-0 w-full h-full cursor-pointer z-10" />
        <label for="accordion-3" class="flex items-center justify-between p-6 sm:p-8 cursor-pointer active:scale-[0.99] transition-all duration-300 select-none bg-gradient-to-r from-orange-50 to-stone-100 dark:from-stone-800 dark:to-gray-700 group-hover:from-orange-100 group-hover:to-orange-50 dark:group-hover:from-stone-700 dark:group-hover:to-gray-600">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-200 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">What impact have we made so far?</h3>
          <svg class="w-6 h-6 text-orange-500 dark:text-orange-300 transform transition-transform duration-300 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 peer-checked:max-h-96 transition-all duration-500 ease-in-out overflow-hidden px-6 sm:px-8 bg-stone-50 dark:bg-stone-900/50">
          <div class="py-5 text-gray-600 dark:text-stone-300 text-base leading-relaxed">
            <p class="mb-3">Since our inception, we have positively impacted thousands of lives. Here are some key achievements:</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">15,000+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Meals provided annually</p>
              </div>
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">5,000+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Children educated</p>
              </div>
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">100+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Community projects</p>
              </div>
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">500+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Active volunteers</p>
              </div>
            </div>
            <img src="https://picsum.photos/400/250?random=2" alt="Impact statistics infographic" class="rounded-lg shadow-md mb-3 object-cover w-full h-auto max-h-48 sm:max-h-60" loading="lazy">
            <p class="text-gray-700 dark:text-stone-300 text-sm italic">"Your support directly translates into tangible change."</p>
          </div>
        </div>
      </div>

    </div>
    <div class="p-6 sm:p-8 bg-gradient-to-t from-orange-100 via-stone-100 to-white dark:from-stone-800 dark:via-gray-700 to-stone-700 rounded-b-xl">
      <p class="text-center text-gray-600 dark:text-stone-400 text-sm sm:text-base">Together, we can build a better future.</p>
    </div>
  </div>
</div>

Paper_Print_Media_Card

A simple, responsive media card with a paper/print-inspired design and pastel color scheme, featuring dark mode support. Ideal for entertainment or media platforms.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border-2 border-gray-100 dark:border-gray-700">
    <!-- Faint textured background to mimic paper -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-paper.png')] opacity-20 dark:opacity-5"></div>

    <div class="relative z-10 p-4 sm:p-6 md:p-8 lg:p-10 flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
      <!-- Image Section -->
      <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 rounded-md overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/400/400?random=1" alt="Media thumbnail" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105">
      </div>

      <!-- Content Section -->
      <div class="text-center sm:text-left flex-grow">
        <h2 class="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-gray-800 dark:text-pink-100 mb-2 leading-tight">
          <span class="block">The Whispering Woods</span>
          <span class="block text-base sm:text-lg text-gray-500 dark:text-purple-300 font-sans italic">An Enchanting Journey</span>
        </h2>
        <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
          Dive into a world where ancient trees share their secrets and mystical creatures roam free. Join Elara on a quest to restore harmony to a forgotten realm.
        </p>
        
        <div class="flex items-center justify-center sm:justify-start text-gray-500 dark:text-gray-400 text-sm mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd" />
          </svg>
          <span>1h 45m</span>
          <span class="mx-2">•</span>
          <span>Fantasy, Adventure</span>
        </div>

        <div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-200 bg-pink-100 dark:bg-pink-700 dark:bg-opacity-20 hover:bg-pink-200 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 transition-all duration-200 text-sm font-semibold shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
            </svg>
            Watch Now
          </button>
          <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-purple-300 dark:border-purple-600 text-purple-700 dark:text-purple-200 bg-purple-100 dark:bg-purple-700 dark:bg-opacity-20 hover:bg-purple-200 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-500 transition-all duration-200 text-sm font-semibold shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
            </svg>
            Details
          </button>
        </div>
      </div>
    </div>

    <!-- Decorative 'paper cut' edge -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-900 dark:to-transparent pointer-events-none">
      <div class="h-full w-full relative overflow-hidden">
        <div class="absolute inset-0 bg-[linear-gradient(to_right,transparent_1px,rgba(0,0,0,0.05)_1px,rgba(0,0,0,0.05)_2px,transparent_2px)] dark:bg-[linear-gradient(to_right,transparent_1px,rgba(255,255,255,0.02)_1px,rgba(255,255,255,0.02)_2px,transparent_2px)] bg-[length:10px_10px] transform -skew-y-1 -translate-y-px opacity-70"></div>
      </div>
    </div>
  </div>
</div>

1 ... 5 6 7 8 9 ... 335

Search Components

Categories

All Components