Komponente zum Einbetten von Medien 14
Eine Medieneinbettungskomponente, die in einem skeuomorphen Stil gestaltet ist, mit responsiven Effekten und Unterstützung für dunkle Themen. Es enthält ein Bild, eine Beschreibung und einen Benutzer-Avatar.
HTML-Code
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8"> <div class="relative"> <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/> <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2"> <span>Featured Media</span> </div> </div> <div class="mt-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2> <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p> </div> <div class="flex items-center mt-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/> <div class="ml-3"> <p class="text-gray-800 dark:text-white font-semibold">John Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p> </div> </div></div>Verwandte Komponenten
Komponente "Medien einbetten"
Eine Retro-/Vintage-Medien-Embed-Komponente, die mit Nostalgie aus den 80er und 90er Jahren gestaltet wurde. Es bietet reaktionsschnelles Styling und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Komponente "Medien einbetten"
Eine responsive Medieneinbettungskomponente mit 3D-Designelementen und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.
Komponente "Medien einbetten"
Eine Medieneinbettungskomponente im Neumorphism-Stil, die für den Konsum von Blogs und Inhalten geeignet ist und ein triadisches Farbschema aufweist. Responsives Design mit Unterstützung für den Dunkelmodus.