Composants Capital Composante modale
Composante modale

Un composant modal complexe, réactif et interactif pour le e-commerce, avec des couleurs complémentaires et des micro-interactions pour l’engagement des utilisateurs. Prend en charge le thème sombre.
Aperçu

HTML Code

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
  <div class="relative p-8 border w-full max-w-md md:max-w-xl lg:max-w-3xl shadow-lg rounded-2xl bg-white dark:bg-gray-800 transform transition-all duration-500 scale-105 hover:scale-100">

    <!-- Close Button -->
    <div class="absolute top-4 right-4">
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition ease-in-out duration-300 transform hover:rotate-90 focus:outline-none">
        <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="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Product Image and Details -->
    <div class="md:flex items-center">
      <div class="w-full md:w-1/2 rounded-lg overflow-hidden transform transition-all duration-500 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover">
      </div>
      <div class="w-full md:w-1/2 md:ml-6 mt-4 md:mt-0 text-center md:text-left">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">Deluxe Smartwatch Pro</h2>
        <p class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold mb-4">Electronics</p>
        <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Experience the future on your wrist with our Deluxe Smartwatch Pro. Track your fitness, receive notifications, and stay connected.</p>

        <div class="flex items-center justify-center md:justify-start mb-4">
          <span class="text-4xl font-bold text-teal-600 dark:text-teal-400 mr-3">$299</span>
          <span class="text-lg text-gray-500 dark:text-gray-400 line-through">$399</span>
          <span class="ml-3 px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full transform hover:scale-110 transition duration-300">-25%</span>
        </div>
        
        <!-- Quantity Selector -->
        <div class="mb-5 flex items-center justify-center md:justify-start">
          <label for="quantity" class="text-gray-700 dark:text-gray-300 mr-3">Quantity:</label>
          <select id="quantity" name="quantity" class="form-select block w-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out hover:border-indigo-400">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>

        <!-- Call to Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-center md:justify-start space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-lg hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
            Add to Cart
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.5 13 5.707 13H17a1 1 0 000-2H5.707l.293-.293A.997.997 0 006 10.5V10h1a1 1 0 000-2H7V7a1 1 0 000-2h1a1 1 0 000-2H6.555L5.216 1.76C5.074 1.25 4.5 1 4 1H3zM4 16a1 1 0 100-2 1 1 0 000 2zm10 0a1 1 0 100-2 1 1 0 000 2z" />
            </svg>
          </button>
          <button class="flex-1 px-6 py-3 rounded-xl bg-teal-500 text-white font-semibold text-lg hover:bg-teal-600 dark:bg-teal-400 dark:hover:bg-teal-500 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
            Buy Now
          </button>
        </div>

      </div>
    </div>

    <!-- Customer Reviews Section -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center md:text-left">Customer Reviews</h3>
      
      <div class="space-y-6">
        <!-- Review 1 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">Jane Doe</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Absolutely love this smartwatch! The features are incredible, and it looks super stylish."</p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-teal-500" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">John Smith</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Great value for money. The battery life is impressive, and I love the vibrant display."</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
Composants associés

Modal triadique 3D d’entreprise

Un composant modal réactif, conçu en 3D avec une palette de couleurs triadique, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.
Ouvrir
VerremorphismeModalComposant

Un composant modal de style Glassmorphism avec une palette de couleurs analogue, une complexité modérée, adapté à l’affichage de blogs/contenus. Dispose d’un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Ouvrir
Healthcare_Medical_Modal_Component

Un composant modal complexe et réactif pour les applications médicales/de santé, inspiré du Material Design avec une palette de couleurs Sunset/Warm. Comprend des éléments de formulaire, des images et la prise en charge du mode sombre.
Ouvrir