一个具有神经形态设计的手风琴组件,具有响应效果,并支持暗黑主题,使用Tailwind CSS.
<div x-data="{ activeTab: 1 }" class="max-w-3xl mx-auto p-8 dark:bg-gray-800 dark:text-white rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark"> <div class="mb-6"> <button @click="activeTab = activeTab === 1 ? null : 1" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out"> <h2>Section 1</h2> </button> <div x-show="activeTab === 1" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400"> <p>Content for section 1. This is where the detailed information for the first section goes.</p> </div> </div> <div class="mb-6"> <button @click="activeTab = activeTab === 2 ? null : 2" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out"> <h2>Section 2</h2> </button> <div x-show="activeTab === 2" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400"> <p>Content for section 2. More detailed information can be added here for the second section.</p> </div> </div> <div class="mb-6"> <button @click="activeTab = activeTab === 3 ? null : 3" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out"> <h2>Section 3</h2> </button> <div x-show="activeTab === 3" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400"> <p>Content for section 3. This is the content for the third and final section of the accordion.</p> </div> </div> </div> <style> .shadow-neumorphic-light { box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff; } .shadow-neumorphic-dark { box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151; } .shadow-neumorphic-light-inset { box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff; } .shadow-neumorphic-dark-inset { box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151; } /* Basic responsiveness */ @media (max-width: 768px) { .p-8 { padding: 2rem; } } </style>
Retro/Vintage Accordion Component for Dashboard,具有互补的配色方案和复杂的复杂性。包括使用 Tailwind CSS 的响应式设计和深色主题支持。无 JavaScript。图片来自 picsum.photos 和头像来自 randomuser.me。
描述
手风琴组件,具有3D设计、响应式效果和暗主题支持,仅使用HTML和CSS(Tailwind CSS)。该组件使用CSS实现暗模式,并包含用于流畅手风琴的过渡效果。它是完全响应式的。不使用JavaScript。