Modal de médias sociaux skeuomorphe

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-50 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-gray-200 to-gray-300 rounded-2xl shadow-2xl overflow-hidden dark:from-neutral-700 dark:to-neutral-900 border border-gray-400 dark:border-neutral-600
              transform perspective-1000 rotateX-3 translateZ-0 transition-all duration-300 ease-in-out
              hover:scale-105 hover:rotateX-0 hover:translateZ-10 md:hover:scale-105 group">

    <!-- Top Bezel / Highlight -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-2xl opacity-75 dark:bg-neutral-600 dark:opacity-50 group-hover:h-6 transition-all duration-300"></div>

    <!-- Content Area -->
    <div class="p-6 relative z-10">

      <!-- Header Bar - Mimicking a metallic or glassy top bar -->
      <div class="flex items-center justify-between pb-4 border-b border-gray-400 dark:border-neutral-600 mb-4
                  bg-gray-100/70 dark:bg-neutral-800/70 rounded-md p-3 -mx-3 -mt-3 shadow-inner-sm shadow-gray-400/50 dark:shadow-neutral-900/50">
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">New Post</h3>
        <button class="p-2 rounded-full bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400
                       shadow-md border border-red-400 dark:bg-red-700 dark:hover:bg-red-800 dark:border-red-600
                       text-white text-lg font-bold aspect-square w-8 h-8 flex items-center justify-center
                       transform transition-all duration-200 ease-out active:scale-95 active:shadow-inner-md active:bg-red-700 dark:active:bg-red-900">
          ✕
        </button>
      </div>

      <!-- User Profile Section -->
      <div class="flex items-center space-x-4 mb-6 relative p-3 rounded-xl bg-gray-100/50 dark:bg-neutral-800/50 shadow-inner shadow-gray-300/50 dark:shadow-neutral-900/50">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-orange-400 dark:border-orange-600 shadow-md transform rotate-1 transition-transform duration-300 hover:rotate-6">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100 text-lg">Jessica Miller</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 flex items-center">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
            </svg>
            Public <span class="ml-2 text-xs font-mono text-gray-400 select-none dark:text-gray-500">🔒</span>
          </p>
        </div>
      </div>

      <!-- Textarea for post content -->
      <textarea placeholder="What's on your mind?" rows="5" class="w-full p-4 mb-6 rounded-lg resize-none text-gray-800 bg-gray-100 border border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 dark:text-gray-200 outline-none
                 shadow-inner-lg shadow-gray-300/50 dark:shadow-neutral-900/50
                 focus:border-blue-400 focus:ring-2 focus:ring-blue-300 dark:focus:border-blue-600 dark:focus:ring-blue-800
                 placeholder:text-gray-400 dark:placeholder:text-gray-500
                 font-sans custom-scroll-light dark:custom-scroll-dark
                 transition-all duration-300 ease-in-out"></textarea>

      <!-- Action Buttons Mimicking physical buttons -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-green-400 to-green-600 text-white font-semibold
                       shadow-lg shadow-green-500/50 dark:shadow-green-700/50 border border-green-500 dark:border-green-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-green-600 dark:to-green-800 dark:hover:from-green-500 dark:hover:to-green-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5h-2l-4 4-2-2-6 6z" clip-rule="evenodd"></path></svg>
          Photo
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 text-white font-semibold
                       shadow-lg shadow-blue-500/50 dark:shadow-blue-700/50 border border-blue-500 dark:border-blue-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012 14v.001A1 1 0 003 15h14a1 1 0 001-1v-.001a1 1 0 01-1.707-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
          Live
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 text-white font-semibold
                       shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 border border-purple-500 dark:border-purple-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-purple-600 dark:to-purple-800 dark:hover:from-purple-500 dark:hover:to-purple-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 016 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
          File
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-600 text-white font-semibold
                       shadow-lg shadow-yellow-500/50 dark:shadow-yellow-700/50 border border-yellow-500 dark:border-yellow-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-yellow-600 dark:to-yellow-800 dark:hover:from-yellow-500 dark:hover:to-yellow-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
          Poll
        </button>
      </div>

      <!-- Post Button - Resembles a large, clickable physical button -->
      <button class="w-full py-4 text-2xl font-bold bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-xl text-white
                     shadow-2xl shadow-cyan-500/60 dark:shadow-cyan-700/60 border-2 border-cyan-400 dark:border-cyan-600
                     transform transition-all duration-300 ease-out hover:scale-102 active:scale-98
                     active:shadow-inner-lg active:shadow-cyan-700/70 dark:active:shadow-cyan-900/70
                     drop-shadow-lg text-shadow-lg
                     dark:from-cyan-600 dark:to-cyan-800 dark:hover:from-cyan-500 dark:hover:to-cyan-700">
        Post Now
      </button>

    </div>

    <!-- Bottom Bezel / Shadow -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-400 rounded-b-2xl opacity-75 dark:bg-neutral-800 dark:opacity-50 group-hover:h-6 transition-all duration-300 transform translate-y-1"></div>

  </div>
</div>

<style>
/* Define text shadow */
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.text-shadow-lg {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Define inner shadow utility classes */
.shadow-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.shadow-inner-sm {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.shadow-inner-lg {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
.shadow-inner-md {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Custom scrollbar for textarea */
.custom-scroll-light::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 4px;
  border: 2px solid #e0e0e0;
}

.custom-scroll-light::-webkit-scrollbar-thumb:hover {
  background: #808080;
}

/* Dark mode scrollbar */
.dark .custom-scroll-dark::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-track {
  background: #333333;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb {
  background: #666666;
  border-radius: 4px;
  border: 2px solid #333333;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

/* 3D transforms for skeuomorphism */
.perspective-1000 {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.rotateX-3 {
  transform: rotateX(3deg);
}

@media (max-width: 768px) {
  .rotateX-3,
  .group:hover .rotateX-0,
  .group:hover .translateZ-10 {
    transform: none; /* Disable 3D transforms on small screens */
  }
  .group:hover .scale-105,
  .group:hover .scale-102 {
    transform: scale(1.02); /* Slight scale on mobile hover */
  }
}

</style>