Media Embed Component

<div class="p-4 md:p-6 lg:p-8 bg-gray-950 dark:bg-gray-950 text-blue-300 font-mono antialiased">
  <div class="max-w-xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-900 dark:to-gray-800
              border border-blue-800 dark:border-blue-800 transform hover:scale-[1.01] hover:shadow-blue-500/30">
    
    <!-- Header / User Info -->
    <div class="flex items-center p-4 lg:p-5 border-b border-blue-900 dark:border-blue-900">
      <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-400 object-cover mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-blue-200 text-sm md:text-base font-semibold">@NeonNomad_2077</p>
        <p class="text-blue-500 text-xs mt-0.5">Sent from Cyber-Grid v3.1</p>
      </div>
    </div>

    <!-- Embedded Media Content -->
    <div class="relative pb-[56.25%] overflow-hidden bg-gray-800 dark:bg-gray-800">
      <!-- Placeholder for an iframe or video element -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Caption / Description -->
    <div class="p-4 lg:p-5 border-t border-blue-900 dark:border-blue-900">
      <p class="text-blue-300 text-sm leading-relaxed mb-2">
        Just uploaded the latest #CyberpunkBeat from the data-streams. Feel the pulse of the city! 🤘 Dive into the rhythm. 
        <span class="text-blue-500 hover:text-blue-400 cursor-pointer transition-colors duration-200">#FutureSounds #Synthwave #NeoTokyo</span>
      </p>
      <div class="flex justify-between items-center text-blue-400 text-xs">
        <span>2.3K Likes</span>
        <span>45 Comments</span>
        <span>Link Shared</span>
      </div>
    </div>

    <!-- Action Buttons (Optional) -->
    <div class="flex justify-around py-3 px-4 bg-gray-850 dark:bg-gray-850 border-t border-blue-900 dark:border-blue-900">
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
        Like
      </button>
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        Comment
      </button>
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 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.684 13.342C8.882 13.07 9 12.73 9 12c0-.73-.118-1.07-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l.676-.676M4.342 13.342C4.148 13.064 4 12.721 4 12c0-.721.148-1.064.342-1.342m0 2.684L5.018 12.018m0 0L4.342 11.342V12c0-.721.148-1.064.342-1.342m0 2.684a3 3 0 110-2.684"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.643v4.614z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11l-3 3-3-3"></path></svg>
        Share
      </button>
    </div>

  </div>
</div>