Componente de acordeón
Componente de acordeón con diseño de neumorfismo, efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="max-w-md mx-auto p-8">
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
</div>
</div>
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
</div>
</div>
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>Componentes relacionados
Componente de acordeón
Componente de acordeón responsivo con soporte para temas oscuros, combinación de colores monocromática y microinteracciones para un sitio web de portafolio.
Acordeón de Redes Sociales
Componente de acordeón responsivo con soporte de tema oscuro para interfaces de redes sociales, utilizando principios de diseño de materiales, un esquema de color triádico y un diseño simple. Sin JavaScript, solo HTML con clases CSS de Tailwind. Los estilos de modo oscuro se incluyen con el prefijo dark:.