レトロなダッシュボードアコーディオン
補完的な配色と複雑な複雑さを備えたダッシュボード用のレトロ/ビンテージアコーディオンコンポーネント。レスポンシブデザインと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>関連コンポーネント
マテリアルデザインアコーディオンコンポーネント - 追い風CSS
レスポンシブエフェクトやダークテーマのサポートなど、マテリアルデザインのスタイルを備えたアコーディオンコンポーネント。Tailwind CSSを使用し、プレースホルダー画像/アバターが含まれています。