Media Components Component
A complex, responsive, dark-mode compatible social media media component with a Glassmorphism style using vibrant colors.
HTML Code
<div class="p-4 lg:p-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-xl max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-indigo-700 dark:text-indigo-400">Alice Smith</p>
<p class="text-gray-600 text-sm dark:text-gray-400">Posted on August 25, 2023</p>
</div>
</div>
<div class="mb-4">
<img class="rounded-lg object-cover w-full h-48 border-2 border-pink-500" src="https://picsum.photos/seed/social1/600/400" alt="Post Image">
</div>
<p class="text-gray-800 leading-relaxed mb-4 dark:text-gray-300">
This is an example of a social media post content. Engaging and vibrant!
</p>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-400">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.196-1.113A14.732 14.732 0 0112 20c-4.97 0-9-3.582-9-8s4.03-8 9-8a9.986 9.986 0 014.196 1.113A14.732 14.732 0 0112 4c4.97 0 9 3.582 9 8z" />
</svg>
<span>45 Comments</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.938 9 14.595 9 15.25V17.586a2 2 0 01-2.298 1.995L5 19.258V7.762c0-1.04.283-2.042.857-2.914m14.091 2.914c.574.872.857 1.874.857 2.914v10.492l-2.702 1.351A3 3 0 0115 19.586V15.25c0-.655.118-1.312.316-1.908a2.001 2.001 0 002.005-2.005L17.5 9.25v-2.702a2 2 0 00-2-2H11.7S9.25 4 7.709 4c-1.54 0-3.09.958-3.09 3.154V9l-.708-.354a2 2 0 00-2 0L3 9.25v-1.5c0-2.206 2.94-4.75 6-4.75S15 4 15 6.75v.5l1 .5H17a2 2 0 012 2v.993M2.44 19.09V15c0-1.414-.917-2.73-2.185-2.995M22.56 19.09V15c0-1.414.917-2.73 2.185-2.995" />
</svg>
<span>Share</span>
</div>
</div>
</div>Related Components
Retro Media Component
A responsive media component with a retro/vintage design, supports dark mode.
Glassmorphic Media Component
A responsive media card component with a glassmorphism design (frosted glass effect) built with Tailwind CSS. Features an image placeholder (from picsum.photos) with a hover-reveal play icon, text content, an author section with an avatar (from randomuser.me), and action buttons. The component supports dark mode using Tailwind CSS 'dark:' variants and is responsive across various screen sizes. No JavaScript is required. For optimal visual effect, place this component on a contrasting background. Dark mode functionality assumes appropriate Tailwind CSS configuration (e.g., 'darkMode: "class"' in your tailwind.config.js).
Brutalism Pastel Media Component
A simple, brutalist media component with a pastel color scheme, designed for a blog. Responsive with dark mode support.