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
Accordéon des médias sociaux
Prise en charge des interfaces de médias sociaux, en utilisant les principes de conception matérielle, une palette de couleurs triadique et une mise en page simple. Pas de JavaScript, seulement du HTML avec des classes CSS Tailwind. Les styles du mode sombre sont inclus à l’aide du préfixe dark :.
Neon_Glow_Sepia_Photography_Accordion
Un composant d’accordéon complexe et réactif avec un effet néon/lueur dans les tons sépia/brun, conçu pour les portfolios de photographie, avec des éléments interactifs et la prise en charge du mode sombre.
Skeuomorphism E-commerce Accordéon aux couleurs pastel
Composant d’accordéon skeuomorphe pour le commerce électronique avec des couleurs pastel, se concentrant sur les interactions complexes et la réactivité, y compris la prise en charge du mode sombre.