Componenti di layout
Un componente di layout dashboard reattivo che utilizza microinterazioni e una combinazione di colori pastello, progettato per la visualizzazione dei dati e i pannelli di controllo con supporto per la modalità oscura.
Codice HTML
<div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
<header class="flex justify-between items-center mb-5">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
<button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
<p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
<img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
</div>
<div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
<p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
<img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
</div>
<div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
<p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
<img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
</div>
<div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
<p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
<img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
</div>
<div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
<p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
<img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
</div>
<div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
<p class="text-gray-600 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
<p>© 2023 Dashboard. All rights reserved.</p>
</footer>
</div>Componenti correlati
Neon_Glow_Gaming_Layout
Un componente di layout di gioco complesso e reattivo con effetti neon/bagliore e una combinazione di colori in scala di grigi, che supporta la modalità scura.
Componente Layout Social Media
Un componente di layout per social media reattivo e complesso ispirato al 3D con colori vivaci e supporto per temi scuri utilizzando Tailwind CSS. Include un'intestazione con un logo e una navigazione, un'area di contenuto principale con schede dinamiche per i post e una barra laterale per i profili utente e gli argomenti di tendenza. Ogni elemento è progettato per dare un senso di profondità e interazione.
Layout e-commerce con progettazione 3D
Un layout di componenti web reattivo per l'e-commerce con elementi di progettazione 3D, che incorpora una combinazione di colori complementari e il supporto del tema scuro. È dotato di schede prodotto, una barra di navigazione e un piè di pagina, tutti in stile Tailwind CSS.