<div class="flex flex-col overflow-hidden max-w-xl items-center bg-slate-700
     bg-opacity-60 hover:bg-opacity-40 cursor-pointer shadow-lg drop-shadow-lg rounded-lg duration-300">
        <img class="w-full h-3/4 rounded-t-lg"
          src=""
          alt="image"
        />
        <div class="flex w-full h-1/4 p-8 items-center justify-center">
            <p class="text-white font-semibold">wow such a nice image</p>
        </div>
    </div>