Neumorphicソーシャルメディアコンテナ

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-12 h-12 rounded-full shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
      This is a sample post demonstrating the Neumorphism container component with grayscale colors.
      It supports dark mode and is designed for social media interfaces.
    </p>
    <img class="w-full h-48 object-cover rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark mb-4" src="https://picsum.photos/400/200" alt="Post Image">
    <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
      <span class="flex items-center space-x-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
        </svg>
        <span>1.2K Likes</span>
      </span>
      <span class="flex items-center space-x-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H6z" clip-rule="evenodd" />
        </svg>
        <span>240 Comments</span>
      </span>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #acacac,
                -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a,
                -8px -8px 16px #1a1a1a;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #acacac,
                inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a,
                inset -5px -5px 10px #1a1a1a;
  }
</style>