Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Barre de progression du mode sombre triadique

Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Composant Filtres

Un composant de filtres complexe, réactif, de style Glassmorphism avec une palette de couleurs analogue pour les sites Web d’entreprise. Comprend des éléments translucides et des effets de flou, avec une prise en charge complète du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.

Ouvrir Aperçu

                <div class="2xl:container 2xl:mx-auto">
  <div class="py-12 px-4">
    <div class="lg:flex justify-between">
      <div class="lg:w-4/12">
        <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Filter by Category</h1>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-4">Explore a wide range of products tailored to your needs. From electronics to fashion, find exactly what you are looking for.</p>
        <div class="w-full bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 flex items-center justify-between mt-8">
          <input type="text" class="w-full bg-transparent text-base focus:outline-none placeholder-gray-600 text-gray-600 dark:text-gray-300 dark:placeholder-gray-300 py-4 px-4" placeholder="Search by name" />
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <circle cx="10" cy="10" r="7"></circle>
            <line x1="21" y1="21" x2="15" y2="15"></line>
          </svg>
        </div>
        <div class="mt-10">
          <div class="flex flex-col space-y-4">
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">All Categories</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Electronics</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Fashion</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Home & Kitchen</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Books</span>
            </label>
          </div>
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Price Range</p>
        <div class="flex items-center justify-between mt-4">
          <input type="number" placeholder="Min" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
          <input type="number" placeholder="Max" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Customer Reviews</p>
        <div class="flex flex-col space-y-4 mt-4">
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">5 Stars</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">4 Stars & Up</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">3 Stars & Up</span>
          </label>
        </div>
        <button class="w-full bg-indigo-600 dark:bg-indigo-700 text-white text-base font-semibold py-4 px-4 rounded mt-8">Apply Filters</button>
        <button class="w-full bg-transparent border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white text-base font-semibold py-4 px-4 rounded mt-4">Clear All</button>
      </div>
      <div class="lg:w-8/12 lg:ml-12 lg:mr-0 lg:mt-0 mt-6">
        <div class="flex items-center justify-between">
          <p class="text-base text-gray-600 dark:text-gray-300">Showing 1-12 of 200 products</p>
          <div class="flex items-center space-x-2">
            <select class="w-40 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none">
              <option value="popularity">Sort by Popularity</option>
              <option value="price_asc">Price: Low to High</option>
              <option value="price_desc">Price: High to Low</option>
            </select>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-8">
          <!-- Product Card 1 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=1" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-indigo-600 dark:bg-indigo-700 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                New
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$32.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 2 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=2" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$45.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 3 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=3" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$28.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 4 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=4" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                Sale
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$50.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 5 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=5" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$65.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 6 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=6" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$19.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 7 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=7" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$99.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 8 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=8" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$75.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 9 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=9" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$88.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 10 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=10" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$120.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 11 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=11" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$25.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 12 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=12" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$30.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-center mt-8">
          <nav aria-label="Pagination">
            <ul class="flex">
              <li>
                <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-600 bg-indigo-100 border border-indigo-300 hover:bg-indigo-200 hover:text-indigo-800 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 dark:hover:text-white">1</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de chronologie

Un composant de chronologie réactif avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du thème sombre, adapté aux sites Web d’entreprise. Il comporte des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black py-10 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 dark:text-white mb-16 drop-shadow-lg">
      Company Milestones
    </h1>

    <div class="relative">
      <div class="hidden md:block absolute w-1 h-full bg-blue-400 dark:bg-purple-600 left-1/2 transform -translate-x-1/2 rounded-full shadow-lg"></div>

      <!-- Timeline Item - Left Aligned -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-start md:justify-end mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Foundation & Early Growth</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Established in 20XX, we quickly grew our client base by focusing on innovative solutions and customer satisfaction. Our initial team laid the groundwork for future success and expansion.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">January 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-end md:justify-start"></div>
      </div>

      <!-- Timeline Item - Right Aligned -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-end md:justify-start mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
             <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Technological Advancements</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Introduced cutting-edge AI and machine learning capabilities, revolutionizing our product offerings and providing clients with unparalleled insights and efficiency.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">June 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-start md:justify-end"></div>
      </div>
      
      <!-- Timeline Item - Left Aligned (again) -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-start md:justify-end mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Global Expansion</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Successfully launched operations in several international markets, establishing our presence on a global scale and expanding our diverse customer base.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">November 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-end md:justify-start"></div>
      </div>

       <!-- Timeline Item - Right Aligned (again) -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-end md:justify-start mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
             <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Sustainable Initiatives</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Launched comprehensive sustainability programs, significantly reducing our carbon footprint and reinforcing our commitment to environmental responsibility.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">March 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-start md:justify-end"></div>
      </div>


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

Composant de zone de recherche

Un composant de champ de recherche réactif avec un design minimaliste/plat, une palette de couleurs vives et des interactions complexes, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et est construit avec Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Search for Services</h2>

    <!-- Search Input with Advanced Options -->
    <div class="relative mb-6">
      <input type="text" placeholder="Search..." class="w-full py-3 pl-4 pr-12 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300">
      <button class="absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-300">
        <svg class="h-6 w-6" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </button>
    </div>

    <!-- Filter and Sort Options -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
        <select id="category" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
          <option>All Categories</option>
          <option>Marketing</option>
          <option>Development</option>
          <option>Design</option>
          <option>Consulting</option>
        </select>
      </div>
      <div>
        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
        <select id="sort" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
          <option>Relevance</option>
          <option>Date Posted</option>
          <option>Rating</option>
        </select>
      </div>
    </div>

    <!-- Price Range Slider (Conceptual - without JS) -->
    <div class="mb-6">
      <label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
      <div class="flex items-center space-x-4">
        <span class="text-gray-600 dark:text-gray-400">$50</span>
        <input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-purple-300 dark:bg-purple-700 rounded-lg appearance-none cursor-pointer thumb-purple-500 dark:thumb-purple-400">
        <span class="text-gray-600 dark:text-gray-400">$1000+</span>
      </div>
    </div>

    <!-- Tags/Keywords Input -->
    <div class="mb-6">
      <label for="keywords" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keywords</label>
      <input type="text" id="keywords" placeholder="Enter keywords (e.g.,

Composant de pied de page

Un composant de pied de page neumorphique pour un site Web de blog/contenu, schéma de couleurs monochromatique, avec prise en charge du mode sombre. Il s’agit d’un composant modérément complexe. Il est réactif.

Ouvrir Aperçu

                <footer class="dark:bg-gray-800 bg-gray-200 text-gray-700 dark:text-gray-300 py-10 px-4 md:px-8 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">About Us</h3>
      <p class="text-sm leading-relaxed">We are a passionate team dedicated to delivering high-quality content and insights on various topics. Stay tuned for more!</p>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Quick Links</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact</a></li>
      </ul>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Subscribe</h3>
      <p class="text-sm mb-4">Get the latest articles and updates directly in your inbox.</p>
      <div class="flex">
        <input type="email" placeholder="Your email" class="w-full px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <button class="bg-gray-400 dark:bg-gray-600 text-white px-4 py-2 rounded-r-md hover:bg-gray-500 dark:hover:bg-gray-700 transition-colors duration-200 shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark">Subscribe</button>
      </div>
    </div>
  </div>
  
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #222222;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #222222;
  }
  .shadow-neumorphic-btn-light {
    box-shadow: 3px 3px 6px #b0b0b0, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #222222;
  }
</style>

Composant de connexion sociale

Un composant de connexion sociale simple avec un design skeuomorphique, des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Ce composant convient aux sites de blog ou de consommation de contenu, offrant une expérience de connexion visuellement attrayante et conviviale.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
    <h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
    <div class="space-y-4">
      <button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
      </button>
      <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
      </button>
      <button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
      </button>
    </div>
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
    </p>
  </div>
</div>

Composant Infographie

Composant d’infographie complexe avec conception Neumorphism, schéma de couleurs complémentaire, prise en charge du mode réactif et sombre, pour les entreprises/entreprises, à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 p-8 flex flex-col items-center justify-center"><div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 max-w-6xl w-full transition-all duration-300 ease-in-out"><h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 text-center">Annual Business Overview</h1><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-indigo-500 dark:bg-indigo-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">+25%</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Revenue Growth</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Year-over-year increase in total revenue.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-teal-500 dark:bg-teal-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">$12M</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Net Profit</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Record-breaking profits for the fiscal year.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-red-500 dark:bg-red-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">1500+</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">New Clients</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Expanding our client base significantly.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-yellow-500 dark:bg-yellow-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">98%</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Client Retention</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Strong client satisfaction and loyalty.</p></div></div><div class="mt-12"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Key Performance Indicators</h2><div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6"><h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Market Share Analysis</h3><p class="text-gray-600 dark:text-gray-400 mb-4">Our market share has seen a steady increase, climbing from 15% to 20% in the last quarter, outpacing competitors through strategic initiatives and product innovations. This growth is attributed to aggressive marketing campaigns and enhanced product features that resonate with our target audience.</p><div class="h-48 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-300"><p>Placeholder for Market Share Chart</p></div></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6"><h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Employee Satisfaction Survey</h3><p class="text-gray-600 dark:text-gray-400 mb-4">Employee satisfaction remains high at an average of 4.5 out of 5 stars. Key factors contributing to this excellent rating include flexible work arrangements, professional development opportunities, and a supportive work environment. We continue to invest in our employees' well-being and growth.</p><div class="h-48 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-300"><p>Placeholder for Employee Satisfaction Chart</p></div></div></div></div><div class="mt-12"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Customer Testimonials</h2><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"The insights provided by this company were invaluable. Our business has never been more efficient!"</p><p class="font-semibold text-gray-700 dark:text-gray-200">John Doe, CEO of Alpha Corp</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"Their data analysis transformed our marketing strategy. Highly recommended!"</p><p class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith, Marketing Director at Beta Ltd</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"A truly professional team with impactful solutions. We saw immediate positive results."</p><p class="font-semibold text-gray-700 dark:text-gray-200">David Lee, Founder of Gamma Solutions</p></div></div></div><div class="mt-12 text-center"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Future Outlook</h2><p class="text-gray-700 dark:text-gray-300 leading-relaxed max-w-3xl mx-auto">Looking ahead, we are focused on expanding into new markets, innovating our product lines, and enhancing customer experience. Our projections indicate continued growth and a stronger market presence, driven by our commitment to excellence and strategic partnerships.</p><button class="mt-8 px-8 py-4 bg-purple-600 dark:bg-purple-800 text-white font-bold rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:bg-purple-700 dark:hover:bg-purple-900 transition-all duration-300 ease-in-out">Download Full Report</button></div></div></div><style>.shadow-neumorphic-light {box-shadow: 9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff;}.dark .shadow-neumorphic-dark {box-shadow: 9px 9px 18px #1a1a1a, -9px -9px 18px #2a2a2a;}.shadow-neumorphic-card-light {box-shadow: 6px 6px 12px #a7a7a7, -6px -6px 12px #ffffff;}.dark .shadow-neumorphic-card-dark {box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #2a2a2a;}.shadow-neumorphic-circle-light {box-shadow: 7px 7px 14px #8f8f8f, -7px -7px 14px #ffffff;}.dark .shadow-neumorphic-circle-dark {box-shadow: 7px 7px 14px #151515, -7px -7px 14px #303030;}.shadow-neumorphic-button-light {box-shadow: 6px 6px 12px #9c27b0, -6px -6px 12px #d589e4;}.dark .shadow-neumorphic-button-dark {box-shadow: 6px 6px 12px #512da8, -6px -6px 12px #673ab7;}</style>

Composant Graphiques

Un composant de graphiques de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs triadique et une complexité modérée. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
      <h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Chart 1 -->
        <div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
          <div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
            <div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
          </div>
        </div>

        <!-- Chart 2 -->
        <div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
          <div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
            <div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
            <div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
            <div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
            <div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
          </div>
          <div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
            <span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
          </div>
        </div>

        <!-- Chart 3 -->
        <div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
          <div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
            <div class="flex items-end h-full">
              <div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
            </div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Section for more data or controls -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
      <h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
        <div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
          <p class="text-4xl">1.2M</p>
          <p>Total Sales</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
          <p class="text-4xl">15%</p>
          <p>Growth Rate</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
          <p class="text-4xl">£250K</p>
          <p>Net Profit</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Cartes thermiques

Un composant de cartes thermiques réactif avec un style Glassmorphism, une palette de couleurs analogue et une complexité modérée pour un portfolio, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition-all duration-300">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Activity Heatmap</h2>
      <div class="grid grid-cols-7 gap-1 text-center text-sm text-gray-600 dark:text-gray-300 mb-2">
        <span>Mon</span>
        <span>Tue</span>
        <span>Wed</span>
        <span>Thu</span>
        <span>Fri</span>
        <span>Sat</span>
        <span>Sun</span>
      </div>
      <div class="grid grid-cols-7 gap-1">
        <!-- Loop for weeks -->
        {[...Array(4)].map((_, weekIndex) => (
          // Loop for days
          [...Array(7)].map((_, dayIndex) => {
            const intensity = Math.floor(Math.random() * 5); // 0-4 for intensity
            const colors = [
              "bg-purple-200 dark:bg-purple-800",
              "bg-purple-300 dark:bg-purple-700",
              "bg-purple-400 dark:bg-purple-600",
              "bg-purple-500 dark:bg-purple-500",
              "bg-purple-600 dark:bg-purple-400"
            ];
            return (
              <div
                key={`${weekIndex}-${dayIndex}`}
                class={`h-8 w-full rounded-sm ${colors[intensity]} transform hover:scale-105 transition-transform duration-200 cursor-pointer`}
                title={`Day ${dayIndex + 1}, Week ${weekIndex + 1}: Intensity ${intensity}`}
              ></div>
            );
          })
        ))}
      </div>
      <div class="flex justify-between items-center mt-6 text-gray-600 dark:text-gray-300 text-sm">
        <span>Less</span>
        <div class="flex space-x-1">
          <div class="h-4 w-4 bg-purple-200 dark:bg-purple-800 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-300 dark:bg-purple-700 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-400 dark:bg-purple-600 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-500 dark:bg-purple-500 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-600 dark:bg-purple-400 rounded-sm"></div>
        </div>
        <span>More</span>
      </div>
    </div>
  </div>
</div>

Composant CAPTCHA

Un composant CAPTCHA de style Glassmorphism avec une palette de couleurs triadique, adapté aux plateformes de médias sociaux. Comprend des éléments translucides semblables à du verre dépoli avec des effets de flou, avec une complexité moyenne et quelques fonctionnalités interactives. Le design est réactif et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-300 hover:scale-105">
    <h2 class="text-3xl font-bold text-white dark:text-gray-100 mb-6 text-center drop-shadow-lg">Verify You Are Human</h2>

    <div class="flex flex-col md:flex-row items-center justify-between bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg p-4 mb-6 shadow-inner border border-white border-opacity-20 dark:border-gray-600">
      <img src="https://picsum.photos/id/1025/100/50" alt="CAPTCHA Image" class="rounded-md mb-4 md:mb-0 md:mr-4 shadow-md">
      <div class="flex-grow">
        <p class="text-white dark:text-gray-200 text-sm mb-2">Click the image that contains a <b>bicycle</b>.</p>
        <div class="grid grid-cols-3 gap-2">
          <img src="https://picsum.photos/id/237/80/80" alt="Option 1" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/190/80/80" alt="Option 2" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/257/80/80" alt="Option 3" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/214/80/80" alt="Option 4" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/286/80/80" alt="Option 5" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/27/80/80" alt="Option 6" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
        </div>
      </div>
    </div>

    <div class="flex items-center text-white dark:text-gray-200 mb-6">
      <input type="checkbox" id="robot-check" class="form-checkbox h-5 w-5 text-blue-400 bg-white bg-opacity-30 dark:bg-gray-600 dark:bg-opacity-50 border-white border-opacity-30 dark:border-gray-500 rounded-md focus:ring-blue-400 mr-3">
      <label for="robot-check" class="text-sm select-none">I'm not a robot</label>
    </div>

    <button class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Verify
    </button>

    <p class="text-white dark:text-gray-300 text-xs text-center mt-4 opacity-75">Verification helps keep our community safe.</p>
  </div>
</div>

1 ... 90 91 92 93 94 ... 282

Catégories

Tous les composants