Komponente für Social-Media-Karten
Eine minimalistische und lebendige Kartenkomponente, die sich für Social-Media-Schnittstellen eignet und Benutzerbeiträge mit Bildern, Likes, Kommentaren und Freigabeoptionen anzeigt. Es reagiert vollständig und unterstützt den Dunkelmodus.
HTML-Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
<div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
<div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-gray-900 dark:text-white">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</div>
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Post Image">
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Exploring the vibrant streets of Lisbon! So much beauty and history around every corner. #Travel #Lisbon #Portugal</p>
<div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
<div class="flex items-center space-x-4">
<a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span>120 Likes</span>
</a>
<a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span>25 Comments</span>
</a>
</div>
<a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
</svg>
<span>Share</span>
</a>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
<div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-gray-900 dark:text-white">John Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</p>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</div>
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1025/600/400" alt="Post Image">
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Morning run views! Nothing beats a cool breeze and a clear sky to start the day. #Fitness #MorningRun #Nature</p>
<div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
<div class="flex items-center space-x-4">
<a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span>85 Likes</span>
</a>
<a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span>10 Comments</span>
</a>
</div>
<a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
</svg>
<span>Share</span>
</a>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
<div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-gray-900 dark:text-white">Emily White</p>
<p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</div>
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1043/600/400" alt="Post Image">
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Such a creative afternoon in the studio! Love bringing new ideas to life. #Art #Creative #StudioLife</p>
<div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
<div class="flex items-center space-x-4">
<a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span>150 Likes</span>
</a>
<a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span>30 Comments</span>
</a>
</div>
<a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
</svg>
<span>Share</span>
</a>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
<div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-violet-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-gray-900 dark:text-white">Michael Brown</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</div>
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1053/600/400" alt="Post Image">
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Coffee and codes, my favorite combination to kick off the week! #DeveloperLife #CoffeeLover #Coding</p>
<div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
<div class="flex items-center space-x-4">
<a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span>200 Likes</span>
</a>
<a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span>45 Comments</span>
</a>
</div>
<a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
</svg>
<span>Share</span>
</a>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
ArtDeco_EarthTones_Cards_Technology_SaaS
Eine einfache, reaktionsschnelle Kartenkomponente für Technologie-/SaaS-Anwendungen, inspiriert von geometrischen Art-Déco-Mustern und einem natürlichen Farbschema in Erdtönen. Enthält Unterstützung für den Dunkelmodus.
Komponente "Glassmorphism-Karten"
Glassmorphism Cards Komponente mit leuchtenden Farben. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.
Brutalistische Kartenkomponente
Eine brutalistische Kartenkomponente mit responsivem Design und Unterstützung für den Dunkelmodus.