Media Embed Component 14
A Media Embed Component designed in a skeuomorphic style, featuring responsive effects and dark theme support. It includes an image, description, and user 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>Related Components
Media Embed Component - Crypto/Blockchain
A simple, responsive media embed component designed for cryptocurrency or blockchain applications, featuring sepia/brown tones and dark mode support to reduce eye strain.
Media Embed Component
A simple, responsive media embed component with cyberpunk and corporate blue aesthetics, designed for social media interfaces with dark mode support.
Media Embed Component
A complex, responsive media embed component for blog/content consumption, featuring organic/nature-inspired design, jewel tones, and dark mode support. Includes a video player, article content, and related media.