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
Un composant d’accordéon de style 3D conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du thème 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.
Composant accordéon
Un composant d’accordéon avec une conception 3D, des effets réactifs et une prise en charge du thème sombre en utilisant uniquement HTML et CSS (Tailwind CSS). Le composant utilise CSS pour le mode sombre et inclut des transitions pour des accordéons fluides. Il est entièrement réactif. Aucun JavaScript n’est utilisé.