Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Wishlist_Component

Un composant complexe, de couleur triadique, de liste de souhaits d’entreprise/professionnel adapté à un tableau de bord, doté d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Un composant complexe d’indicateur de progression inspiré de l’Art déco pour les plateformes d’emploi/carrière, avec des motifs géométriques, un style luxueux et des couleurs complémentaires. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant d’affichage de contenu propre et minimaliste pour les tableaux de bord, mettant l’accent sur la typographie et les systèmes de grille avec des couleurs neutres froides et une réactivité totale.

Ouvrir Aperçu

                <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

Un composant complexe de visualisation de propriétés à 360 degrés pour les plateformes immobilières, avec un design monospace/développeur, une palette de couleurs rétro/vintage et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Onglets - Emploi/Carrière

Un composant d’onglets réactifs avec une esthétique Material Design et une palette de couleurs pastel, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Volet Galerie d’entreprise/professionnelle

Un composant de galerie d’images réactif et polyvalent avec une esthétique d’entreprise/professionnelle, utilisant une palette de couleurs forêt/vert. Conçu pour les plates-formes éducatives, il fournit une interface propre et fiable avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant complexe de visualisation de produits à 360° avec une esthétique industrielle et brute utilisant une palette de couleurs violet/violet, adapté à un portefeuille. Comprend des éléments interactifs, un design réactif et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de lecteur audio

Un composant de lecteur audio complexe et minimaliste avec une palette de couleurs rétro/vintage, conçu pour les plateformes de rencontres/sociales. Les fonctionnalités incluent les commandes de lecture, la barre de progression, le contrôle du volume, les informations sur les pistes et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant d’accordéon complexe à thème rétro conçu pour les sites Web à but non lucratif/caritatifs, avec des dégradés de couleurs sourdes, des transitions fluides et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Une carte multimédia simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs pastel, avec prise en charge du mode sombre. Idéal pour les plateformes de divertissement ou de médias.

Ouvrir Aperçu

                <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

Rechercher des composants

Catégories

Tous les composants

Wishlist_Component

ArtDecoProgressIndicator

Swiss_International_Typography_Content_Display_Component

360_Viewer_Component

Composant Onglets - Emploi/Carrière

Volet Galerie d’entreprise/professionnelle

360_viewer_component

Composant de lecteur audio

NonProfit_Retro_Accordion

Paper_Print_Media_Card