Media Components Component
A media component designed with skeuomorphism style using Tailwind CSS, featuring responsive effects and dark theme support.
HTML Code
<div class="max-w-sm mx-auto">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Dark theme support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1A202C;
}
}
</style>Related Components
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).
Media Components Component with Glassmorphism
Component with Glassmorphism design, responsive and dark mode support
Media Components
A Neumorphism styled component for media display with responsive design and dark theme support.