复古仪表板手风琴
Retro/Vintage Accordion Component for Dashboard，具有互补的配色方案和复杂的复杂性。包括使用 Tailwind CSS 的响应式设计和深色主题支持。无 JavaScript。图片来自 picsum.photos 和头像来自 randomuser.me。
HTML 代码
<div class="max-w-md mx-auto rounded-none overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 border-4 border-purple-500 dark:border-yellow-500">
<div class="border-b border-purple-400 dark:border-yellow-400">
<button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
Dashboard Section 1
</button>
<div class="px-6 py-4 text-gray-700 dark:text-gray-300">
<p>Content for dashboard section 1. This section provides an overview of key metrics with interactive charts and graphs.</p>
<div class="mt-4 grid grid-cols-2 gap-4">
<div>
<img src="https://picsum.photos/150/100" alt="Random Image" class="rounded border-2 border-purple-500 dark:border-yellow-500">
</div>
<div>
<h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400">Metric A</h4>
<p class="text-sm">Value: 1200</p>
<h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400 mt-2">Metric B</h4>
<p class="text-sm">Value: 75%</p>
</div>
</div>
</div>
</div>
<div class="border-b border-purple-400 dark:border-yellow-400">
<button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
Dashboard Section 2
</button>
<div class="px-6 py-4 text-gray-700 dark:text-gray-300">
<p>Content for dashboard section 2. Detailed reports and customizable views.</p>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500 dark:border-yellow-500">
<div>
<p class="font-semibold text-purple-600 dark:text-yellow-400">User Name</p>
<p class="text-sm">Last activity: 2 hours ago</p>
</div>
</div>
</div>
</div>
<div>
<button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
Dashboard Section 3
</button>
<div class="px-6 py-4 text-gray-700 dark:text-gray-300">
<p>Content for dashboard section 3. Settings and configuration options.</p>
<ul class="list-disc list-inside mt-2">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
</div>