Media Components

Media Components Component

A media component designed in the brutalism style, showcasing a bold layout with high contrast, responsive effects, and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
  <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
    <img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
    <div class="flex-1">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
      <p class="text-gray-700 dark:text-gray-400 mb-4">
        This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
      </p>
      <span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
        Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
      </span>
    </div>
  </div>
  <div class="mt-4 flex gap-4">
    <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
    <button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800, .bg-gray-700 {
      background-color: #4a5568;
    }
    .text-gray-200 {
      color: #edf2f7;
    }
    .text-gray-400 {
      color: #a0aec0;
    }
  }
</style>

Media Components Component with Glassmorphism

Component with Glassmorphism design, responsive and dark mode support

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo1/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 1. It provides some details about the content.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400"> pêøvêl</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo2/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 2. More details about the content can be found here.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo3/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 3, providing additional information.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Developer</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

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).

Open Preview

                <div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
  <!-- Image -->
  <div class="relative">
    <img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
    <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
      <svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
    </div>
  </div>

  <!-- Content Area -->
  <div class="p-5 sm:p-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
      Glassmorphic Media Showcase
    </h2>
    <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
      Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
    </p>

    <!-- Author/Meta Info -->
    <div class="flex items-center space-x-3 mt-4">
      <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
      <div>
        <p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
        <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-indigo-600 hover:bg-indigo-700 text-white 
                     dark:bg-indigo-500 dark:hover:bg-indigo-600 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        View Details
      </button>
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-white/50 hover:bg-white/70 text-slate-700 
                     dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200 
                     border border-white/60 dark:border-slate-600/60 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        Bookmark
      </button>
    </div>
  </div>
</div>

Media Components Component

A responsive media component inspired by retro/vintage design styles, featuring nostalgic aesthetics from the 80s/90s. It supports dark theme with Tailwind CSS and includes placeholder images and avatars.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
    <img class="rounded-lg w-full h-48 object-cover mb-4" src="https://picsum.photos/seed/media/400/200" alt="Media Thumbnail">
    <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">Retro Media Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media component, capturing the essence of the nostalgia from the 80s and 90s.</p>
    <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <p class="text-gray-800 dark:text-gray-200 font-semibold">User Name</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Posted on March 1, 2023</p>
        </div>
    </div>
</div>

Media Components Component

A responsive media component featuring microinteractions with engaging animations, designed with Tailwind CSS. It supports dark theme and includes placeholder images and avatars.

Open Preview

                <div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </div>
</div>

Media Components Component

A media component designed with skeuomorphism style using Tailwind CSS, featuring responsive effects and dark theme support.

Open Preview

                <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>

Media Components Component 39

A Media Component designed with Dark Mode UI, featuring responsive effects and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-bold">John Doe</h2>
            <p class="text-gray-400">Posted 2 hours ago</p>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/600/400" alt="Media Content">
    <h3 class="text-lg font-semibold mb-2">Amazing Scenery</h3>
    <p class="text-gray-300">This is a beautiful representation of nature that showcases the stunning landscapes we often take for granted.</p>
    <div class="mt-4 flex justify-between">
        <button class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-300">Like</button>
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Comment</button>
    </div>
</div>

Media Components Component 2

A retro/vintage styled media component featuring a nostalgic design inspired by 80s/90s aesthetics, with responsive effects and dark theme support, using Tailwind CSS.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
    </div>
</div>

Categories

Media Components Component

Media Components Component with Glassmorphism

Glassmorphic Media Component

Media Components Component

Media Components Component

Media Components Component

Media Components Component 39

Media Components Component 2