Tableau de bord rétro accordéon
Composant d’accordéon rétro / vintage pour tableau de bord avec palette de couleurs complémentaires et complexité complexe. Comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript. Images via picsum.photos et avatars via randomuser.me.
HTML Code
<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>Composants associés
Composant d’accordéon de conception matérielle - Tailwind CSS
Un composant d’accordéon avec un style Material Design, y compris des effets réactifs et la prise en charge du thème sombre. Utilise Tailwind CSS et inclut des images/avatars de substitution.
Neumorphisme Accordéon Composant
Composant accordéon avec conception neumorphique, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’accordéon rétro vintage
Un composant d’accordéon de style rétro/vintage avec des tons de terre pour la visualisation des données du tableau de bord. Conçu pour une complexité moyenne avec une prise en charge réactive et sombre.