Componente Componenti di layout
Un componente web reattivo progettato con uno stile scheumorfico, caratterizzato da una combinazione di colori monocromatica per siti web aziendali/aziendali. Include elementi interattivi per un'interfaccia ricca e supporta la modalità oscura.
Codice HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
<h1 class="text-3xl font-bold mb-4">Corporate Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-xl font-semibold">Company Overview</h2>
<img src="https://picsum.photos/200/100" alt="Company Overview" class="rounded-lg mb-2" />
<p class="mb-2">Overview of company performance and metrics. Check out the latest updates and key statistics.</p>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Details</button>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-xl font-semibold">Team Members</h2>
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Member 1" class="w-12 h-12 rounded-full mr-3" />
<p>John Doe - CEO</p>
</div>
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Member 2" class="w-12 h-12 rounded-full mr-3" />
<p>Jane Smith - CTO</p>
</div>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Team</button>
</div>
</div>
<div class="mt-4 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-xl font-semibold">Latest Reports</h2>
<ul class="list-disc pl-5">
<li><a href="#" class="text-blue-400 hover:underline">Q1 2023 Financial Report</a></li>
<li><a href="#" class="text-blue-400 hover:underline">Market Trends Analysis</a></li>
<li><a href="#" class="text-blue-400 hover:underline">Competitor Comparison</a></li>
</ul>
</div>
</div>Componenti correlati
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 del cruscotto di Glassmorphism
Un semplice layout di vetromorfismo per un cruscotto con elementi traslucidi simili al vetro smerigliato, con una combinazione di colori pastello e il supporto della modalità scura.
Layout del portfolio di neumorfismo
Un layout di neumorfismo semplice e reattivo per un portfolio, che supporta la modalità scura.