Componente de la caja de luz de la imagen - Skeuomorphic Purple

<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 font-sans">

  <!-- Lightbox Container -->
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-inset-xl dark:from-purple-800 dark:to-indigo-900 dark:shadow-inset-dark overflow-hidden">

    <!-- Skeuomorphic Top Bar -->
    <div class="absolute top-0 left-0 w-full h-12 bg-gradient-to-b from-purple-400 to-indigo-500 dark:from-purple-900 dark:to-indigo-800 rounded-t-3xl shadow-sm-light dark:shadow-sm-dark flex items-center justify-between px-4 sm:px-6">
      <span class="text-white opacity-75 text-sm font-semibold tracking-wider">VIEW IMAGE</span>
      <button aria-label="Close Lightbox" class="w-8 h-8 flex items-center justify-center rounded-full bg-gradient-to-tl from-red-500 to-red-700 dark:from-red-600 dark:to-red-800 border border-red-800 dark:border-red-900 shadow-neu-sm hover:shadow-neu-md transition-all duration-200">
        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Image Wrapper with Skeuomorphic Border -->
    <div class="relative w-full aspect-video mt-12 bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden shadow-neu-xl dark:shadow-neu-dark-xl border-4 border-purple-500 dark:border-purple-700 p-2 sm:p-3">
      <img src="https://picsum.photos/800/600?random=1" alt="Placeholder Image for Job/Career" class="w-full h-full object-cover rounded-md shadow-inner-dark dark:shadow-inner-light">
      <!-- Image Overlay for Skeuomorphism -->
      <div class="absolute inset-0 rounded-md pointer-events-none style-none-grain"></div>
    </div>

    <!-- Image Title/Description -->
    <div class="mt-6 text-center">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-indigo-800 dark:text-indigo-200 subpixel-antialiased text-shadow-sm">Job Offer Details</h2>
      <p class="mt-2 text-base text-purple-700 dark:text-purple-300 opacity-90 leading-relaxed max-w-md mx-auto">
        Reviewing key metrics and growth opportunities for the new software engineering role. A detailed look at the project scope.
      </p>
    </div>

    <!-- Action Buttons -->
    <div class="mt-8 flex justify-center space-x-4">
      <button aria-label="Download Image" class="px-6 py-3 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-700 dark:from-indigo-700 dark:to-indigo-900 text-white font-semibold shadow-neu-sm hover:shadow-neu-md hover:scale-105 transition-all outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-purple-300 dark:focus:ring-offset-gray-800">
        <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        Download
      </button>
      <button aria-label="Share Image" class="px-6 py-3 rounded-full bg-gradient-to-br from-purple-500 to-purple-700 dark:from-purple-700 dark:to-purple-900 text-white font-semibold shadow-neu-sm hover:shadow-neu-md hover:scale-105 transition-all outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-2 focus:ring-offset-purple-300 dark:focus:ring-offset-gray-800">
        <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9 12.723 9 12c0-.723-.118-1.07-.316-1.342m0 0C8.423 10.4 7.9 10 7 10c-1.105 0-2 .895-2 2s.895 2 2 2c.9 0 1.4-.4 1.684-.658zm0 0c.277-.282.63-.424 1.13-.424h5.272c.49 0 .848.14 1.13.424m0 0c.282.277.424.63.424 1.13v2.24c0 .49-.14.848-.424 1.13m0 0C16.895 18 16 18.895 16 20s.895 2 2 2 2-.895 2-2-.895-2-2-2c-.9 0-1.4-.4-1.684-.658zm-11.316 0A2.001 2.001 0 015 20c0 1.105.895 2 2 2s2-.895 2-2-.895-2-2-2c-.9 0-1.4-.4-1.684-.658z"></svg>
        Share
      </button>
    </div>

  </div>

  <!-- Custom Styles for Skeuomorphism -->
  <style>
    .shadow-inset-xl {
      box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3),
                  inset -5px -5px 15px rgba(255, 255, 255, 0.7);
    }
    .dark .shadow-inset-dark {
      box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.7),
                  inset -5px -5px 15px rgba(255, 255, 255, 0.05);
    }
    .shadow-sm-light {
      box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3);
    }
    .dark .shadow-sm-dark {
      box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
    }
    .shadow-neu-sm {
      box-shadow: 3px 3px 6px rgba(0,0,0,0.2), -3px -3px 6px rgba(255,255,255,0.7);
    }
    .dark .shadow-neu-sm {
      box-shadow: 3px 3px 6px rgba(0,0,0,0.7), -3px -3px 6px rgba(255,255,255,0.05);
    }
    .shadow-neu-md {
      box-shadow: 6px 6px 12px rgba(0,0,0,0.2), -6px -6px 12px rgba(255,255,255,0.7);
    }
    .dark .shadow-neu-md {
      box-shadow: 6px 6px 12px rgba(0,0,0,0.7), -6px -6px 12px rgba(255,255,255,0.05);
    }
    .shadow-neu-xl {
      box-shadow: 8px 8px 16px rgba(0,0,0,0.3), -8px -8px 16px rgba(255,255,255,0.8);
    }
    .dark .shadow-neu-dark-xl {
      box-shadow: 8px 8px 16px rgba(0,0,0,0.7), -8px -8px 16px rgba(255,255,255,0.08);
    }
    .shadow-inner-dark {
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4),
                   inset -1px -1px 3px rgba(255, 255, 255, 0.1);
    }
    .dark .shadow-inner-light {
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6),
                   inset -1px -1px 3px rgba(255, 255, 255, 0.05);
    }
    .text-shadow-sm {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
    .dark .text-shadow-sm {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    }
    .style-none-grain {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWZmzLpAAAAHnRSTlMAAAAABgYGDg4OFBQWHh4eICAgLCwsMDQ0ODg4QEBAqH5o5wAAALNJREFUeNrlksuOgkAQRG9s3Jt7Z//_P6zEioQ3Mwev4Lqu6y49h2v0f7N4j7eXz7O2b3Cefl4T59n0d3Ce7j4s5-F6eX5On6v0f5V2d3gPezj2f9G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bk4A4-d8C0jO_bAAAAAASUVORK5CYII=");
      opacity: 0.05;
      filter: grayscale(100%);
    }
  </style>
</div>