Componente Componenti di layout
Un layout di componente Web reattivo che segue i principi di Material Design per un'applicazione di social media con supporto per temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Social Media Layout</h2>
<div class="grid grid-cols-1 gap-4">
<!-- Profile Header -->
<div class="flex items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">@johndoe</p>
</div>
</div>
<!-- Post Content -->
<div class="p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
<p class="text-gray-800 dark:text-gray-200 mb-2">This is a simple post layout demonstrating the use of Material Design principles.</p>
<img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-auto rounded-lg">
</div>
<!-- Action Buttons -->
<div class="flex justify-around mt-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700">Like</button>
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700">Comment</button>
<button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700">Share</button>
</div>
</div>
</div>Componenti correlati
Componente Layout 3D
Un componente di layout di progettazione 3D reattivo con immagini accattivanti, che incorpora profondità attraverso ombre e livelli. Include il supporto per la modalità oscura e presenta immagini e avatar casuali.
Componente Layout 3D
Un layout di design 3D semplice, reattivo e accattivante per siti Web aziendali/aziendali che utilizzano colori vivaci, con supporto per temi scuri.
Componente Componenti di layout
Un componente di layout progettato in uno stile scheumorfico che imita le controparti del mondo reale, con elementi reattivi e supporto per temi scuri utilizzando Tailwind CSS.