Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un design rétro/vintage et une palette de couleurs de terre, adapté aux tableaux de bord.

Ouvrir Aperçu

                <div class="relative w-full p-4 max-w-4xl mx-auto">
    <!-- Thumbnail images -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=1')" />
        <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=2')" />
        <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=3')" />
        <img src="https://picsum.photos/300/200?random=4" alt="Image 4" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=4')" />
    </div>

    <!-- Modal overlay -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-75 justify-center items-center dark:bg-opacity-90" onclick="closeModal()">
        <div class="relative w-11/12 md:w-3/4 lg:w-2/3">
            <span class="absolute top-2 right-2 text-white cursor-pointer" onclick="closeModal()">&times;</span>
            <img id="modalImage" class="rounded-lg shadow-lg" src="" alt="Modal Image" />
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode and retro theme -->
<style>
    body {
        background-color: #f4f4e6;
        color: #333;
    }
    .dark body {
        background-color: #1a202c;
        color: #e2e8f0;
    }
</style>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs conçu avec un style skeuomorphique, adapté aux applications de commerce électronique, utilisant un schéma de couleurs en niveaux de gris et des éléments interactifs complexes. Il présente un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email to proceed with your purchase.</p>
        <div class="flex items-center mb-4">
            <img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
            </div>
        </div>
        <label class="block mb-2 text-gray-700 dark:text-gray-300 font-medium" for="verification-code">Verification Code:</label>
        <input type="text" id="verification-code" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="Enter your code" required />
        <button class="mt-4 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200">Verify</button>
        <div class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">
            <p>Didn’t receive a code? <a href="#" class="text-gray-800 dark:text-gray-200 font-semibold">Resend</a></p>
        </div>
    </div>
</div>

Composant Mentions de l’utilisateur

Un composant réactif de mentions d’utilisateur avec un design Glassmorphism, une palette de couleurs analogue et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">User Mentions</h2>    <div class="space-y-4">      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@johndoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@janedoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@peterjones</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>    </div>  </div></div>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs simple doté d’une palette de couleurs vives et d’éléments de conception 3D adaptés aux sites Web d’entreprise.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 transform hover:scale-105 transition-transform duration-300 ease-in-out">
        <h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-400 mb-6">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-4">Please enter the verification code sent to your email:</p>
        <form class="mt-4">
            <input type="text" placeholder="Verification Code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" />
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-lg shadow hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-200 ease-in-out">Verify</button>
        </form>
        <div class="flex justify-between mt-6">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Need Help?</a>
        </div>
    </div>
</div>

Composant de zone de recherche

Une boîte de recherche réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <form class="flex items-center w-full max-w-md mx-auto">
    <label for="search" class="sr-only">Search</label>
    <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                    clip-rule="evenodd"></path>
            </svg>
        </div>
        <input type="text" id="search"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-stone-500 focus:border-stone-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-stone-500 dark:focus:border-stone-500"
            placeholder="Search..." required>
    </div>
    <button type="submit"
        class="p-2.5 ml-2 text-sm font-medium text-white bg-stone-700 rounded-lg border border-stone-700 hover:bg-stone-800 focus:ring-4 focus:outline-none focus:ring-stone-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:focus:ring-stone-800">
        <svg class="w-5 h-5" 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>
</form>

Composant Badges

Un composant de badges réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex flex-wrap gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">  
  <!-- Badge Example -->  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-blue-500 text-white rounded-md shadow-lg dark:bg-blue-700">    
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Name</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-green-500 text-white rounded-md shadow-lg dark:bg-green-700">    
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Another User</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-red-500 text-white rounded-md shadow-lg dark:bg-red-700">    
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Three</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-yellow-500 text-white rounded-md shadow-lg dark:bg-yellow-700">    
    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Four</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-purple-500 text-white rounded-md shadow-lg dark:bg-purple-700">    
    <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project One</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-teal-500 text-white rounded-md shadow-lg dark:bg-teal-700">    
    <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project Two</span>  
  </div>
</div>

Composant du formulaire de paiement

Un composant de formulaire de paiement simple et réactif avec la conception Neumorphism, la palette de couleurs monochromatiques, la prise en charge du mode sombre et des espaces réservés aux images.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="relative px-4 py-10 bg-white dark:bg-gray-700 mx-8 md:mx-0 shadow-lg rounded-lg sm:p-10">
      <div class="max-w-md mx-auto">
        <div class="flex items-center space-x-5">
          <div class="h-14 w-14 bg-gray-200 dark:bg-gray-600 rounded-full flex flex-shrink-0 justify-center items-center text-gray-500 dark:text-gray-400 text-2xl font-mono"></div>
          <div class="block pl-2 font-semibold text-xl self-start text-gray-700 dark:text-gray-200">
            <h2 class="leading-relaxed">Checkout</h2>
          </div>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-600">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:opacity-100 ease-in-out">
            <div class="flex flex-col">
              <label class="leading-loose">Full Name</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="John Doe">
            </div>
            <div class="flex flex-col">
              <label class="leading-loose">Card Number</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="1234 5678 9012 3456">
            </div>
            <div class="flex items-center space-x-4">
              <div class="flex flex-col">
                <label class="leading-loose">Expiry</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="MM/YY">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="flex flex-col">
                <label class="leading-loose">CVV</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="123">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a2 2 0 00-2-2H8a2 2 0 00-2 2v3m6 0v-3"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pt-4 flex items-center space-x-4">
            <button class="flex justify-center items-center w-full text-gray-900 dark:text-gray-100 px-4 py-3 rounded-md focus:outline-none bg-gray-200 dark:bg-gray-600 shadow-md hover:bg-gray-300 dark:hover:bg-gray-700">
              Checkout
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de la liste de souhaits

Composant de liste de souhaits réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Affichage d’une liste d’articles avec des images, des titres, des prix et des boutons de suppression. Conçu pour un tableau de bord aux couleurs vives.

Ouvrir Aperçu

                <div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
    <div class="space-y-6">

      <!-- Wishlist Item 1 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
          <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
          <p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
          <p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

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

Composant d’en-tête

Composant d’en-tête avec micro-interactions, schéma de couleurs complémentaires, complexité complexe, à des fins de tableau de bord, à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <header class="bg-gray-100 dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-4 py-4 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <h1 class="text-xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
      <nav class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
      </nav>
    </div>

    <div class="flex items-center space-x-4">
      <button class="text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:rotate-6 focus:outline-none">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0m6 0v2a3 3 0 11-6 0v-2"></path></svg>
      </button>

      <div class="relative">
        <button class="flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-500 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="hidden md:block font-medium">John Doe</span>
        </button>
        <!-- Dropdown would be implemented with JS, not included here -->
      </div>
    </div>
  </div>
</header>

Composant Messages de réussite

Composant de messages de réussite réactifs avec prise en charge du mode sombre et style Glassmorphism pour le commerce électronique.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-5 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg">
    <div class="text-center">
      <svg class="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="<http://www.w3.org/2000/svg>">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h2 class="mt-5 text-2xl font-semibold text-gray-800 dark:text-white">Payment Successful!</h2>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Thank you for your purchase. Your order has been placed successfully.</p>
    </div>
    <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Transaction ID:</span>
        <span>#123456789</span>
      </div>
      <div class="flex justify-between mt-2 text-gray-700 dark:text-gray-200">
        <span>Amount Paid:</span>
        <span>$199.00</span>
      </div>
    </div>
    <div class="mt-6">
      <a href="#" class="block w-full px-4 py-2 text-center text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">View Order Details</a>
    </div>
  </div>
</div>

1 ... 104 105 106 107 108 ... 262

Catégories

Tous les composants