拟物化媒体嵌入组件

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