Media Embed

Media Embed Component

A responsive media embed component for e-commerce with a minimalist design, vibrant colors, and dark mode support.

                <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-10 dark:bg-gray-800">
    <div class="md:flex">
        <div class="md:flex-shrink-0">
            <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Product Name</div>
            <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Amazing Product Title</a>
            <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the product, highlighting its key features and benefits. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
                <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

A responsive Media Embed Component with a "Retro/Vintage" design, inspired by 80s/90s aesthetics like old CRT monitors and VCR players. It uses a complementary color scheme of Teal and Orange on a Slate gray base, suitable for "Business/Corporate" websites. The component features moderate complexity with hover effects on the play button and media thumbnail, a faux REC light animation, and decorative non-functional control elements. It includes dark theme support using Tailwind's `dark:` prefix. The media area is designed for a 16:9 aspect ratio (requires Tailwind aspect-ratio plugin or a CSS fallback like padding-bottom trick). Placeholder image from picsum.photos is used.

Open Preview

                <div class="min-h-screen bg-slate-100 dark:bg-slate-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-xl rounded-lg shadow-2xl overflow-hidden border-2 border-slate-400 dark:border-slate-600">
    <!-- Outer Casing - Retro Monitor Look -->
    <div class="bg-slate-300 dark:bg-slate-700 p-2 border-b-2 border-slate-400 dark:border-slate-600">
      <div class="flex items-center space-x-1.5 pl-1">
        <span class="block w-3 h-3 bg-red-500 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-yellow-400 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-green-500 rounded-full opacity-80"></span>
      </div>
    </div>

    <div class="bg-slate-200 dark:bg-slate-800 p-1 sm:p-2">
      <!-- Screen Bezel -->
      <div class="bg-black p-1 sm:p-1.5 rounded-sm shadow-inner">
        <!-- Media Embed Area with Aspect Ratio (requires @tailwindcss/aspect-ratio plugin) -->
        <div class="aspect-w-16 aspect-h-9 relative group overflow-hidden">
          <img src="https://picsum.photos/seed/retrocorp1/1280/720" alt="Retro Media Thumbnail" class="absoluteിക inset-0 w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:opacity-75 filter grayscale group-hover:grayscale-0"/>
          
          <!-- Play Button Overlay -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out bg-black bg-opacity-30 group-hover:bg-opacity-40">
            <button aria-label="Play" class="flex items-center justify-center p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded-sm shadow-md transform transition-all duration-150 ease-in-out hover:scale-105 border-b-2 border-r-2 border-orange-700 dark:border-orange-500 hover:border-orange-600 dark:hover:border-orange-400 active:border-b-0 active:border-r-0 active:translate-x-px active:translate-y-px">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M6 19V5l14 7-14 7z"/>
              </svg>
              <span class="ml-2 text-sm sm:text-base font-semibold hidden md:inline">PLAY</span>
            </button>
          </div>
          
          <!-- Watermark/Branding (subtle, retro) -->
          <div class="absolute bottom-2 right-2 md:bottom-3 md:right-3 flex items-center">
            <span class=

Media Embed Component

A Neumorphism styled media embed component suitable for blog and content consumption, featuring a triadic color scheme. Responsive design with dark mode support.

Open Preview

                <div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

Retro Media Embed Component

A responsive media embed component with a retro/vintage design, vibrant colors, moderate complexity, and dark mode support, suitable for e-commerce platforms.

Open Preview

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/seed/retro-media/600/400" alt="Retro media visual">
    <div class="absolute top-0 right-0 bg-yellow-400 text-gray-800 text-xs font-bold px-2 py-1 m-2 rounded-md">Featured</div>
  </div>
  <div class="px-6 py-4">
    <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Awesome Product Title</h3>
    <p class="text-gray-700 dark:text-gray-300 text-base">This is a brief description of the product, highlighting its key features and benefits in a retro style.</p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#retro</span>
    <span class="inline-block bg-green-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#vintage</span>
    <span class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white mb-2">#ecommerce</span>
  </div>
  <div class="px-6 py-4 flex justify-between items-center bg-gray-100 dark:bg-gray-700">
    <span class="font-bold text-xl text-gray-900 dark:text-white">$49.99</span>
    <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Add to Cart</button>
  </div>
</div>

Neumorphism Media Embed Component

A neumorphic Media Embed Component for business websites, with responsive design and dark theme support using complementary colors.

Open Preview

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-900 p-10">
  <div class="neumorphic-card bg-gray-300 dark:bg-gray-800 p-8 rounded-xl w-full max-w-4xl">
    <div class="flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
      <!-- Media Embed -->
      <div class="flex-1 neumorphic-inset p-4 rounded-lg overflow-hidden">
        <iframe class="w-full aspect-video rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
      </div>
      <!-- Content Area -->
      <div class="flex-1 flex flex-col justify-between">
        <div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Media Title</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">This is a description of the media content. It provides context and details about the video or audio being embedded. The design uses subtle shadows and highlights to create the neumorphic effect, visually pushing the content forward.</p>
        </div>
        <div class="flex items-center mt-4">
          <img class="w-12 h-12 rounded-full mr-4 neumorphic-avatar" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Author Name</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Date Published</p>
          </div>
        </div>
        <div class="mt-6 flex space-x-4">
          <button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Learn More</button>
          <button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Share</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphic-card {
  box-shadow: 9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5);
}
.dark .neumorphic-card {
  box-shadow: 9px 9px 16px rgb(0,0,0,.6), -9px -9px 16px rgba(30,30,30, .5);
}

.neumorphic-inset {
  box-shadow: inset 5px 5px 12px rgb(163,177,198,.6), inset -5px -5px 12px rgba(255,255,255, .5);
}
.dark .neumorphic-inset {
   box-shadow: inset 5px 5px 12px rgb(0,0,0,.6), inset -5px -5px 12px rgba(30,30,30, .5);
}

.neumorphic-avatar {
    box-shadow: 3px 3px 7px rgb(163,177,198,.6), -3px -3px 7px rgba(255,255,255, .5);
}
.dark .neumorphic-avatar {
    box-shadow: 3px 3px 7px rgb(0,0,0,.6), -3px -3px 7px rgba(30,30,30, .5);
}

.neumorphic-button {
    box-shadow: 5px 5px 10px rgb(163,177,198,.6), -5px -5px 10px rgba(255,255,255, .5);
    transition: all 0.2s ease-in-out;
}

.neumorphic-button:not(:active):hover {
    box-shadow: 7px 7px 14px rgb(163,177,198,.7), -7px -7px 14px rgba(255,255,255, .6);
}

.dark .neumorphic-button {
    box-shadow: 5px 5px 10px rgb(0,0,0,.6), -5px -5px 10px rgba(30,30,30, .5);
}

.dark .neumorphic-button:not(:active):hover {
    box-shadow: 7px 7px 14px rgb(0,0,0,.7), -7px -7px 14px rgba(30,30,30, .6);
}

.neumorphic-button:active {
    box-shadow: inset 3px 3px 7px rgb(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255, .5);
}

.dark .neumorphic-button:active {
    box-shadow: inset 3px 3px 7px rgb(0,0,0,.6), inset -3px -3px 7px rgba(30,30,30, .5);
}
</style>

Media Embed Component

A media embed component designed with glassmorphism effects, featuring a responsive design suitable for business websites with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-xl shadow-lg max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-40">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-md">
    <div class="flex flex-col">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Company Name</h2>
      <p class="text-gray-600 dark:text-gray-400">Professional tagline or subtitle goes here.</p>
    </div>
  </div>
  <div class="relative w-full py-6 bg-white bg-opacity-30 rounded-lg shadow-md dark:bg-gray-700 dark:bg-opacity-30">
    <iframe class="w-full h-48 rounded-lg" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
    <div class="absolute inset-0 rounded-lg border-2 border-white opacity-30"></div>
  </div>
  <div class="mt-4">
    <button class="px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">Learn More</button>
  </div>
</div>

Media Embed Component

A brutalist, vibrant, and complex Media Embed Component for blogs, built with responsive design and dark mode support using Tailwind CSS.

Open Preview

                <div class="dark:bg-gray-900 dark:text-white p-8">
  <div class="max-w-4xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-4 border-black dark:border-white p-4">
      <div class="relative pb-56 md:pb-0 md:h-96">
        <iframe class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-white" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="flex flex-col justify-between">
        <div>
          <h2 class="text-3xl font-bold mb-4 border-b-4 border-black dark:border-white pb-2">Embedded Media Title</h2>
          <p class="mb-4">This is a description of the embedded media. It is intentionally a bit rough around the edges to fit the brutalist style. The vibrant colors and bold borders create a sense of energy and excitement.</p>
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <div>
              <p class="font-bold">Author Name</p>
              <p class="text-sm">Date Published</p>
            </div>
          </div>
        </div>
        <div class="flex justify-end">
          <button class="bg-red-500 text-white px-6 py-3 border-4 border-black dark:border-white font-bold text-lg hover:bg-red-700">Watch Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

Media Embed Component

A responsive Media Embed component styled in a Skeuomorphic manner, using Earth tone colors and suitable for e-commerce, with dark theme support.

Open Preview

                <div class="max-w-lg mx-auto p-4 bg-slate-200 dark:bg-slate-800 rounded-lg shadow-lg">
    <div class="relative overflow-hidden rounded-lg">
        <img class="w-full h-64 object-cover mb-4" src="https://picsum.photos/600/400" alt="Product Image">
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-full shadow">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a description of the product that mimics natural textures and colors, providing an earthy feel.</p>
    <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
        <button class="px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
    </div>
</div>

Media Embed Component

A simple, responsive media embed component with grayscale 3D design and dark mode support, suitable for business websites. Uses Tailwind CSS for styling.

Open Preview

                <div class="relative flex items-center justify-center h-96 overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg m-4">

  <!-- 3D effect background elements (simplified) -->
  <div class="absolute inset-0 z-0 pointer-events-none transform scale-150">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700 opacity-50"></div>
    <div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-800 rounded-lg transform rotate-3"></div>
  </div>

  <!-- Content area -->
  <div class="relative z-10 p-8 bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl max-w-md text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Embed Media</h2>
    
    <!-- Placeholder for embedded media (e.g., iframe for YouTube,- Vimeo) -->
    <!-- Replace with actual embed code -->
    <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
      <p>Media Placeholder</p>
    </div>

    <p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">Embed your videos, maps, or other media here.</p>

  </div>

</div>

Media Embed Component

A minimalist media embed component designed for dashboards with responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-xs mx-auto">
    <div class="relative overflow-hidden rounded-lg">
        <img src="https://picsum.photos/400/200" alt="Media" class="w-full h-48 object-cover rounded-lg">
    </div>
    <div class="mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300">
            <div class="ml-4">
                <h2 class="text-lg font-semibold dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the media content goes here.</p>
            </div>
        </div>
        <div class="mt-2">
            <button class="bg-gray-800 text-white py-1 px-3 rounded hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Action Button</button>
        </div>
    </div>
</div>

Categories