Componente de acordeón
Componente de acordeón de morfismo de vidrio con colores vibrantes para redes sociales, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, interfaz rica con múltiples elementos interactivos, diseño receptivo y soporte de temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind.
Código HTML
<div class="relative min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
<div class="absolute inset-0 z-0 bg-[url('https://picsum.photos/1920/1080?random=1')] bg-cover bg-center opacity-20"></div>
<div class="absolute inset-0 z-0 backdrop-filter backdrop-blur-3xl"></div>
<div class="relative z-10 w-full max-w-2xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 rounded-3xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
<div class="p-8">
<h2 class="text-4xl font-extrabold text-white dark:text-white mb-8 text-center drop-shadow-lg">Social Feed Accordion</h2>
<!-- Accordion Item 1 -->
<div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
<input type="checkbox" id="accordion-1" class="hidden peer">
<label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
<h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Sarah J., posted a new photo</h3>
</div>
<svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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>
</label>
<div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
<div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
<p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Absolutely loving this view! So refreshing to be out in nature. #TravelGoals #NatureLover"</p>
<img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-xl mb-4 w-full h-auto object-cover border border-white border-opacity-30 dark:border-gray-500">
<div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
<span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 24 Likes</span>
<span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 8 Comments</span>
</div>
<div class="mt-4 flex flex-col space-y-3">
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Commenter 1" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
<p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">John D.</span>: "Stunning! Where is this place?"</p>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Commenter 2" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
<p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">Emily R.</span>: "Love your adventurous spirit!"</p>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
<input type="checkbox" id="accordion-2" class="hidden peer">
<label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
<h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Mike T., shared an article</h3>
</div>
<svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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>
</label>
<div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
<div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
<p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Fascinating read on the future of AI. Definitely recommend checking this out. #AI #Technology"</p>
<div class="bg-white bg-opacity-20 dark:bg-gray-600 dark:bg-opacity-40 rounded-xl p-4 flex items-center mb-4 border border-white border-opacity-30 dark:border-gray-500">
<img src="https://picsum.photos/100/100?random=3" alt="Article Thumbnail" class="w-24 h-24 object-cover rounded-lg mr-4">
<div>
<h4 class="text-lg font-bold text-white dark:text-white mb-1">The Rise of Intelligent Machines</h4>
<p class="text-white text-opacity-80 dark:text-gray-300 text-sm">An in-depth look at the impact of AI on society and beyond.</p>
<a href="#" class="text-blue-200 hover:underline dark:text-blue-300 text-sm">Read More</a>
</div>
</div>
<div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
<span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 45 Likes</span>
<span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 15 Comments</span>
</div>
</div>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
<input type="checkbox" id="accordion-3" class="hidden peer">
<label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
<h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Jessica L., updated her profile</h3>
</div>
<svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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>
</label>
<div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
<div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
<p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Excited to start a new chapter! Check out my updated bio and recent work. #NewBeginnings #CareerGoals"</p>
<div class="flex items-center text-white text-opacity-90 dark:text-gray-300 text-sm">
<span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg> Profile Updated</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Acordeón en modo oscuro (Finanzas/Banca)
Un componente de acordeón simple, monocromático y de temática oscura diseñado para interfaces financieras y bancarias. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, utilizando tonos de un solo color para una apariencia limpia.
Neon_Glow_Sepia_Photography_Accordion
Un componente de acordeón complejo y sensible con un efecto neón/resplandor en tonos sepia/marrón, diseñado para portafolios de fotografía, con elementos interactivos y compatibilidad con el modo oscuro.
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:.