CCHub Logo CCHub Tailwind Collection
Komponenten Wunschzettel Wishlist_Component

Wishlist_Component

Eine komplexe, dreifarbige Wunschlistenkomponente für Unternehmen/Berufe, die für ein Dashboard geeignet ist, mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Wunschliste Immobilienkomponente

Eine reaktionsschnelle und kontrastreiche Wunschlistenkomponente für Immobilien, inspiriert von den Prinzipien des Material Design, mit Unterstützung des Dunkelmodus.

Offen

Bauhaus Wunschzettel Komponente

Eine einfache, reaktionsschnelle Wunschlistenkomponente für Mode-/Beauty-Produkte, die nach Bauhaus-Prinzipien entworfen wurden, mit coolen neutralen Farben und Unterstützung für den Dunkelmodus.

Offen

Wunschlisten-Komponente

Wunschlistenkomponente mit 3D-Design, analogem Farbschema und einfacher Komplexität für Dashboard-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen