メディアの埋め込み

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
    
    <div class="relative z-10 space-y-4">
      <!-- Video/Media Placeholder -->
      <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
      </div>
      
      <!-- Title -->
      <div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
        Business Insights: Q3 Performance
      </div>
      
      <!-- Description -->
      <p class="text-stone-600 dark:text-stone-300 text-sm">
        A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
      </p>
      
      <!-- Action Button (Optional) -->
      <button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
        Learn More
      </button>
      
      <!-- Metadata/Source (Optional) -->
      <div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Published: October 26, 2023</span>
      </div>
    </div>
  </div>
</div>
              

                <div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="relative" style="padding-bottom: 56.25%;">
      <iframe class="absolute top-0 left-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-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">Rad Video Title</h3>
        <span class="text-sm">5:32</span>
      </div>
      <p class="text-sm mb-4">
        Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis. 
      </p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
        <span class="text-sm font-semibold">Duke Silver</span>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="aspect-w-16 aspect-h-9 mb-4">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg"></iframe>
  </div>
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Engaging Data Visualization Techniques</h3>
  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore innovative ways to present complex data for better insights and decision-making.</p>
  <div class="flex items-center">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Channel Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-green-500">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Data Insights Pro</span>
  </div>
</div>
              

                <div class="p-8 bg-gray-200 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-4xl transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.02] border border-gray-300 dark:border-gray-600">
    <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" 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="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-2">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-4 tracking-tight drop-shadow-sm">The Art of Skeuomorphism in UI Design</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Skeuomorphism, as a design principle, involves incorporating ornamental design cues from physical objects into digital interfaces. It aims to make new functions familiar and intuitive by mimicking real-world counterparts. This approach often uses textures, shadows, and highlights to give digital elements a tangible feel, enhancing user comprehension and engagement, especially in blog and content consumption platforms.
        </p>

        <div class="border-t border-b border-gray-400 dark:border-gray-600 py-4 mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
          </div>
          <div class="flex space-x-3 text-gray-600 dark:text-gray-400">
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 11H9V9h2V7h2v2h2v2h-2v2h-2v-2z"/></svg>
            </a>
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </a>
          </div>
        </div>

        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Transcript</h3>
        <div class="bg-gray-300 dark:bg-gray-700 p-5 rounded-xl shadow-inner border border-gray-400 dark:border-gray-600 h-64 overflow-y-auto custom-scrollbar">
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:00]</span> Welcome to our deep dive into Skeuomorphism, a fascinating design trend that continues to influence digital interfaces.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:15]</span> Originally, skeuomorphism helped users transition from physical to digital tools by replicating familiar real-world cues.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:30]</span> Think about the early calculator apps that looked exactly like physical calculators, with their three-dimensional buttons and LCD displays.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:45]</span> This design philosophy provides a sense of tangibility and familiarity, making complex digital interactions feel more intuitive.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:00]</span> While minimalism has gained prominence, skeuomorphism still finds its place, especially in applications where a sense of realism or traditional aesthetics is key.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:15]</span> For content platforms and blogs, it can enhance readability by visually separating content blocks and interactive elements.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:30]</span> This component demonstrates how skeuomorphic principles, combined with a monochromatic palette, can create a rich, inviting, and highly functional media embed.
          </p>
          <p class="text-gray-800 dark:text-gray-200">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:45]</span> We hope this component inspires you to explore the depths of design.
          </p>
        </div>
      </div>

      <div class="md:col-span-1">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Related Content</h3>
        <div class="space-y-4">
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=1" alt="Related image 1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">The Revival of Vintage Design</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Explore how old-school aesthetics are making a comeback in modern design.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=2" alt="Related image 2">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Monochromatic Magic in UI</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Discover the power of single-color palettes in creating cohesive interfaces.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=3" alt="Related image 3">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Responsive Design Best Practices</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Learn how to build websites that look great on any device, anywhere.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #ccc;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border: 3px solid #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e0;
  }
</style>

              

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

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

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

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

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

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