メディアコンポーネントコンポーネント

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex justify-center items-center p-4">
  <div class="bg-gradient-to-br from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-900 rounded-3xl shadow-2xl p-6 lg:p-10 transform rotate-y-12 hover:rotate-y-0 transition-transform duration-700 ease-in-out relative overflow-hidden max-w-lg w-full">
    <!-- 3D elements for depth -->
    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-10 rounded-3xl transform translateZ(-10px)"></div>
    <div class="absolute bottom-0 right-0 w-full h-full bg-white opacity-10 rounded-3xl transform translateZ(-20px)"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full border-4 border-amber-300 dark:border-amber-500 shadow-lg transform translateZ(15px)" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="ml-4">
          <p class="text-white text-xl font-bold transform translateZ(10px)">John Doe</p>
          <p class="text-amber-200 dark:text-amber-400 text-sm transform translateZ(10px)">@john_doe_official</p>
        </div>
      </div>

      <div class="relative w-full h-64 rounded-xl overflow-hidden shadow-xl mb-6 transform translateZ(5px)">
        <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="Post Image">
        <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
          <svg class="h-16 w-16 text-white" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
      </div>

      <p class="text-white text-lg mb-6 leading-relaxed transform translateZ(10px)">
        Excited to share my latest project! It was a challenging but rewarding experience. #webdesign #creative #tailwindcss
      </p>

      <div class="flex justify-between items-center text-white">
        <div class="flex items-center space-x-4">
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-red-300 dark:text-red-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
            <span class="ml-1 text-lg">2.5K</span>
          </div>
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-green-300 dark:text-green-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM20 8H4V6h16v2zm0 3H4V9h16v2zm0 3H4v-2h16v2z"/>
            </svg>
            <span class="ml-1 text-lg">450</span>
          </div>
        </div>
        <button class="bg-amber-400 hover:bg-amber-500 text-gray-800 font-bold py-3 px-6 rounded-full shadow-lg transform translateZ(8px) hover:scale-105 transition duration-300">
          Share
        </button>
      </div>
    </div>
  </div>
</div>