Componente de caja de luz de imagen

<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <img id="lightbox-trigger" src="https://picsum.photos/600/400?random=1" class="w-full h-48 object-cover rounded-t-lg" alt="Vintage Image">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Vintage Aesthetic</h2>
        <p class="text-gray-600 dark:text-gray-400">A nostalgic look into the past with a touch of modern design.</p>
    </div>
    <div class="flex justify-center pb-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View More Images</button>
    </div>
    <div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</span>
        <img src="https://picsum.photos/1200/800?random=1" class="max-w-full max-h-full rounded shadow-lg" alt="Lightbox Image">
    </div>
</div>

<style>
    /* Dark mode styling */
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #1f2937;
        }
        .text-gray-800 {
            color: #e5e7eb;
        }
        .text-gray-600 {
            color: #d1d5db;
        }
    }
</style>