Skeuomorphism E-commerce Accordéon aux couleurs pastel
Composant d’accordéon skeuomorphe pour le commerce électronique avec des couleurs pastel, se concentrant sur les interactions complexes et la réactivité, y compris la prise en charge du mode sombre.
HTML Code
<div class="max-w-md mx-auto"> <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-xl rounded-lg"> <div class="border-b border-gray-300 dark:border-gray-600"> <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold"> <span>Product Details</span> <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden"> <p class="text-gray-600 dark:text-gray-400 text-sm">Here you can add detailed product information like specifications, materials, etc. This content is hidden by default and revealed when the accordion is expanded.</p> </div> </div> <div class="border-b border-gray-300 dark:border-gray-600"> <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold"> <span>Shipping & Returns</span> <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden"> <p class="text-gray-600 dark:text-gray-400 text-sm">Information about shipping options, delivery times, and return policy goes here. Keep it concise and easy to read.</p> </div> </div> <div> <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold"> <span>Customer Reviews</span> <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden"> <div class="flex items-start mb-4"> <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar"> <div> <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">This product is amazing! Highly recommend.</p> </div> </div> <div class="flex items-start"> <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"> <div> <p class="text-gray-700 dark:text-gray-300 font-semibold">John Smith</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Good quality and fast shipping.</p> </div> </div> </div> </div> </div></div>Composants associés
Composant accordéon
Composant accordéon avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
Industrial_Vibrant_Dating_Accordion
Un composant d’accordéon de style industriel modérément complexe avec des couleurs vives, adapté aux plateformes de rencontres et sociales. Comprend des éléments exposés, une typographie lourde et une réactivité totale avec prise en charge du mode sombre.
RétroAccordéonSimple
Un composant d’accordéon simple, réactif et à thème rétro pour les sites Web d’entreprise, avec prise en charge du mode sombre à l’aide de Tailwind CSS. Ce composant utilise un schéma de couleurs triadique et ne nécessite aucun code JavaScript.