Cruscotto retrò Fisarmonica
Componente a fisarmonica retrò / vintage per cruscotto con combinazione di colori complementari e complessità complessa. Include un design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Niente JavaScript. Immagini tramite picsum.photos e avatar tramite randomuser.me.
Codice 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>Componenti correlati
Componente Fisarmonica
Un componente a fisarmonica in stile 3D progettato per siti Web aziendali/aziendali con supporto per temi scuri.
Componente a fisarmonica - Tailwind CSS
Un componente a fisarmonica con stile Material Design, inclusi effetti reattivi e supporto per temi scuri. Utilizza Tailwind CSS e include immagini/avatar segnaposto.
Fisarmonica sui social media
Componente Responsive Accordion con Dark Theme Supporto per le interfacce dei social media, utilizzando i principi del Material Design, una combinazione di colori triadica e un layout semplice. Niente JavaScript, solo HTML con le classi CSS di Tailwind. Gli stili della modalità scura sono inclusi utilizzando il prefisso dark:.