Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="min-h-screen bg-gray-900 text-white p-6">
<h1 class="text-3xl font-bold mb-6">Social Media Feed</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Post Card -->
<div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post1/400/200" alt="Post Image" />
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div>
<h2 class="font-semibold text-lg">User Name</h2>
<p class="text-gray-400">@username</p>
</div>
</div>
<p class="mt-2 text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<div class="mt-4 flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
<button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
<button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
</div>
</div>
</div>
<!-- Repeat similar post cards for more content -->
<div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post2/400/200" alt="Post Image" />
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div>
<h2 class="font-semibold text-lg">User Name</h2>
<p class="text-gray-400">@username</p>
</div>
</div>
<p class="mt-2 text-gray-300">Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<div class="mt-4 flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
<button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
<button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
</div>
</div>
</div>
<div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post3/400/200" alt="Post Image" />
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<div>
<h2 class="font-semibold text-lg">User Name</h2>
<p class="text-gray-400">@username</p>
</div>
</div>
<p class="mt-2 text-gray-300">Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.</p>
<div class="mt-4 flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
<button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
<button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Disposition simple de la grille brutaliste
Un composant de mise en page de grille brutaliste simple et réactif avec prise en charge des tons de terre et du mode sombre, adapté aux sites Web d’entreprise.
Composant de disposition de grille de neumorphisme
Composant de disposition de grille de neumorphisme
Composant de mise en page de grille pastel skeuomorphe
Mise en page de grille pastel skeuomorphe pour blog/contenu, simple avec mode sombre