Skeuomorphism Acordeón de comercio electrónico con colores pastel
Componente de acordeón skeuomórfico para comercio electrónico con colores pastel, que se centra en interacciones complejas y capacidad de respuesta, incluida la compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de acordeón de neumorfismo
Componente de acordeón con diseño neumórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de acordeón
Un componente de acordeón con diseño 3D, efectos responsivos y soporte de temas oscuros que usa solo HTML y CSS (Tailwind CSS). El componente utiliza CSS para el modo oscuro e incluye transiciones para acordeones suaves. Es totalmente responsivo. No se utiliza JavaScript.
Componente de acordeón
Un componente de acordeón de estilo 3D diseñado para sitios web comerciales/corporativos con soporte para temas oscuros.