Search Components

Media Embed

Embedded content from external sources like YouTube or Vimeo

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>

A responsive Media Embed Component with Glassmorphism design, earth tone colors, and dark mode support, built with Tailwind CSS for social media use cases. Includes a frosted glass effect and uses placeholder images/avatars.

Open Preview

                <div class="relative overflow-hidden rounded-lg shadow-lg group bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg"> <div class="relative w-full overflow-hidden bg-gray-200 rounded-t-lg aspect-w-16 aspect-h-9 group-hover:opacity-75"> <img src="https://picsum.photos/id/237/1000/600" alt="Placeholder image" class="object-cover object-center w-full h-full"> </div> <div class="flex items-center px-5 py-4"> <div class="flex-shrink-0"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-900 dark:text-white"> <a href="#" class="hover:underline"> Username </a> </p> <p class="text-xs text-gray-700 dark:text-gray-300"> Posted on March 15, 2023 </p> </div> </div> <div class="p-5"> <h3 class="text-lg font-medium text-gray-900 dark:text-white"> <a href="#"> Title of the Embedded Media </a> </h3> <p class="mt-2 text-sm text-gray-700 dark:text-gray-300"> This is a description of the embedded media, providing some context or details about the content. </p> </div> <div class="flex items-center justify-between px-5 py-3 bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20"> <div class="flex space-x-4"> <span class="text-sm text-gray-700 dark:text-gray-300">Likes: 1.2k</span> <span class="text-sm text-gray-700 dark:text-gray-300">Comments: 350</span> </div> <a href="#" class="text-sm font-medium text-yellow-700 hover:text-yellow-600 dark:text-yellow-500 dark:hover:text-yellow-400"> View More </a> </div> </div>

Media Embed Component

A responsive Media Embed Component designed with Glassmorphism style, featuring interactive elements for content consumption.

Open Preview

                <div class="flex flex-col items-center p-6 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 dark:bg-opacity-50 border border-white border-opacity-20 max-w-lg w-full">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-white">John Doe</h2>
            <p class="text-sm text-gray-200">Content Creator</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 rounded-lg p-4 shadow-md w-full">
        <h3 class="text-lg font-bold text-white">Exciting New Developments in Technology</h3>
        <iframe class="w-full h-60 mt-3 rounded-lg shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
        <p class="mt-2 text-white">Explore the latest trends and advancements in technology that are shaping the future. Join us as we dive deep into the innovations that are changing our world.</p>
        <div class="mt-3 flex justify-between items-center">
            <button class="py-2 px-4 bg-blue-500 text-white rounded-full hover:bg-blue-600">Read More</button>
            <span class="text-xs text-gray-300">2 hours ago</span>
        </div>
    </div>
    <img src="https://picsum.photos/400/200" alt="Media" class="mt-4 rounded-lg shadow-lg"> 
</div>

Media Embed Component

A responsive Media Embed Component with dark theme support for blog/content sites, styled with Material Design principles, a triadic color scheme, and moderate complexity. Includes an embedded video placeholder and related article links.

Open Preview

                <div class="container mx-auto p-4 max-w-3xl">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute inset-0 w-full h-full" 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="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
      <p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
        <ul>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
          </li>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
          </li>
          <li>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Media Embed Component

A responsive media embed component designed with a neumorphism style, featuring vibrant colors and an interactive interface suitable for dashboard applications.

Open Preview

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl transition-shadow duration-300"><h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Media Embed</h2><div class="flex flex-col items-center w-full mb-4"><img src="https://picsum.photos/400/200" alt="Media" class="rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105"/><p class="text-gray-600 dark:text-gray-300 mt-2">Watch our latest video to stay updated!</p></div><div class="flex w-full justify-between items-center mb-2"><button class="bg-blue-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Play</button><button class="bg-red-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Like</button><button class="bg-yellow-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Share</button></div><div class="flex items-center mt-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md"/><p class="text-gray-800 dark:text-white ml-2">User Name</p></div></div>

Media Embed Component

A minimalist and flat design media embed component with earth tones color scheme, suitable for business/corporate websites. It is a moderate complexity component with responsive design and dark theme support using Tailwind CSS. No JavaScript is included.

Open Preview

                

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">

  <div class="flex flex-col md:flex-row">

    <!-- Media Embed Placeholder -->

    <div class="md:w-2/3 w-full">

      <div class="aspect-w-16 aspect-h-9 bg-gray-300 dark:bg-gray-700 rounded-md overflow-hidden">

        <!-- Placeholder for embedded media (e.g., iframe for YouTube, Vimeo, etc.) -->

        <!-- Replace with your actual embed code -->

        <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe>

      </div>

    </div>



    <!-- Content Area -->

    <div class="md:w-1/3 w-full md:ml-4 mt-4 md:mt-0">

      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Media Title</h3>

      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">

        A brief description of the embedded media goes here. Provide context or a summary.

      </p>

      <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">

        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">

          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />

        </svg>

        <span>Published on: October 26, 2023</span>

      </div>

    </div>



  </div>

</div>

Media Embed Component

A Media Embed Component designed for e-commerce with a 3D design style, complementary color scheme, and responsive layout that supports dark mode.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
    <div class="relative">
        <img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
            <h2 class="text-white text-lg font-semibold">Product Title</h2>
            <p class="text-gray-300">Short description of the product goes here.</p>
        </div>
    </div>
    <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
        <div class="flex justify-between items-center mt-2">
            <span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
        </div>
    </div>
</div>

Search Components

Categories

Media Embed