メディア埋め込みコンポーネント

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