Grid-Layout-Komponente
Eine responsive Grid-Layout-Komponente für Social-Media-Schnittstellen, die in einem skeuomorphen Stil gestaltet sind, mit triadischen Farben, mehreren interaktiven Elementen und Unterstützung für dunkle Themen.
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>Verwandte Komponenten
Industrial_Juwel_Tones_Grid_Layout_Component
Eine reaktionsschnelle Rasterlayout-Komponente für Beratung/Dienstleistungen mit einer industriellen Ästhetik mit juwelenfarbenen Farben. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.
Travel_Booking_Grid_Layout_Component
Eine komplexe, reaktionsschnelle Rasterlayout-Komponente für eine Reisebuchungswebsite mit einem Unternehmens-/Profi-Design, einem analogen Farbschema und Unterstützung für den Dunkelmodus. Enthält Zielkarten, Sucheingabe und eine Seitenleiste.
Entertainment Grid-Layout-Komponente
Ein klares, minimalistisches Rasterlayout, inspiriert von der schweizerischen/internationalen Typografie für Unterhaltungs- und Medienplattformen. Verfügt über ein triadisches Farbschema, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.