Image Lightbox

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>
              

                <div class="relative"> 
    <!-- Lightbox trigger --> 
    <div class="group cursor-pointer"> 
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto rounded-lg border-2 border-gray-700 dark:border-gray-300 transition-all duration-300 ease-in-out hover:scale-105"> 
    </div> 
    
    <!-- Lightbox overlay --> 
    <div class="hidden group-hover:block fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center transition-opacity duration-300"> 
        <div class="relative p-4"> 
            <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="max-w-full max-h-[90vh] rounded-lg border-4 border-yellow-500 dark:border-cyan-400 shadow-2xl"> 
            <button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-700 transition-colors duration-300">Close</button> 
        </div> 
    </div> 
</div> 

<!-- Avatar Section --> 
<div class="mt-4 flex items-center space-x-3"> 
    <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-700 dark:border-gray-300"> 
    <div class="text-lg text-gray-800 dark:text-gray-200"> 
        <h3 class="font-bold">User Name</h3> 
        <p class="text-sm text-gray-600 dark:text-gray-400">User Role</p> 
    </div> 
</div>
              

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg relative">
    <h2 class="text-white text-2xl font-semibold text-center mb-4">Image Lightbox</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1018/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1025/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1032/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-white text-xl font-semibold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
        </div>
    </div>
</div>
              

                <div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>
              

                <
  div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro1/500/300"
      alt="Retro Image 1"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro1/800/600"
        alt="Retro Image 1 Enlarged"
        class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
      >
    <
    /div
  >

  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro2/500/300"
      alt="Retro Image 2"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro2/800/600"
        alt="Retro Image 2 Enlarged"
        class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
      >
    <
    /div
  >


  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro3/500/300"
      alt="Retro Image 3"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro3/800/600"
        alt="Retro Image 3 Enlarged"
        class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
      >
    <
    /div
  >
<
/div
>
              

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
    </div>
</div>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
    <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</button>
        <img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
        <div class="p-4">
            <div class="flex items-center space-x-3">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="text-white">
                    <p class="text-sm font-semibold">John Doe</p>
                    <p class="text-xs text-gray-400">E-commerce Store</p>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
        </div>
    </div>
</div>

<div class="flex justify-center py-6">
    <button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        Open Lightbox
    </button>
</div>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>
              

                <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>