<div class="group rounded-lg z-20 dark:bg-black bg-white group px-4 pt-5 pb-6 grid gap-5 dark:text-zinc-50 shadow-md text-zinc-950 ring-1 hover:ring-zinc-300 ring-zinc-200 dark:ring-zinc-800 dark:hover:ring-zinc-700 max-w-sm w-full backdrop-blur-sm isolate hover:before:rotate-[8deg] before:transition-transform before:w-full before:h-full before:absolute before:rounded-lg before:bg-blue-500/10 before:-z-10 after:w-full after:h-full after:absolute after:rounded-lg dark:after:bg-black after:bg-white after:z-10">
    <div class="flex gap-3 flex-col z-20">
        <span class="dark:bg-blue-500/10 group-hover:bg-blue-500/20 transition-colors bg-blue-300/20 p-2 w-fit rounded-full shadow-sm" ><svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /> </svg> </span>
        <span class="font-semibold text-xl">Super Fast</span>
    </div>
    <p class="opacity-70 text-base/7 z-20">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem architecto quidem nulla
    </p>
</div>

<!-- url of background image -->
<div class="rounded-lg isolate bg-[url('https://images.unsplash.com/photo-1530435460869-d13625c69bbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&q=80')] relative overflow-hidden dark:text-zinc-50 text-zinc-950 ring-1 shadow-md ring-zinc-200 dark:ring-zinc-800 dark:ring-offset-0 dark:hover:ring-zinc-500 hover:ring-zinc-400 max-w-[22rem] m-3">
    <div class="absolute -z-10 bg-white/70 dark:bg-black/70 backdrop-blur-sm w-full h-full"></div>
    <div class="p-5 flex flex-col gap-2 z-10">
        <div class="flex w-full gap-3">
            <a href="" class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /> </svg> </a>
            <a href=""> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" /> <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /> </svg> </a>
        </div>
        <h2 class="font-semibold text-xl">Sales Website</h2>
        <p class="opacity-70 text-xs line-clamp-2">
            Website for a company which Lorem ipsum dolor sit ame Lorem ipsum dolor, sit amet.
        </p>
        <div class="flex gap-2 mt-3 flex-wrap">
            <span class="text-xs bg-zinc-200/70 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border border-zinc-200 px-1.5 py-0.5 rounded" >HTML</span >
            <span class="text-xs bg-zinc-200/70 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border border-zinc-200 px-1.5 py-0.5 rounded" >CSS</span >
            <span class="text-xs bg-zinc-200/70 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border border-zinc-200 px-1.5 py-0.5 rounded" >Javascript</span >
        </div>
        <button class="mt-4 min-w-fit bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-100 hover:text-zinc-800 hover:bg-zinc-100 text-zinc-100 hover:border-zinc-800 dark:hover:border-zinc-100 focus-visible:outline-zinc-800/50 dark:focus-visible:outline-zinc-100/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline active:scale-[0.99]">
            Live Demo
        </button>
    </div>
</div>

<div class="rounded-lg overflow-hidden dark:text-zinc-50 text-zinc-950 ring-1 ring-zinc-300 dark:ring-zinc-700 dark:hover:ring-zinc-600 hover:ring-zinc-400 max-w-[22rem] m-3">
    <img class="w-full h-full object-cover aspect-video object-top"
        src="https://images.unsplash.com/photo-1530435460869-d13625c69bbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&q=80" alt="company website" />
    <div class="p-4 flex flex-col gap-2">
        <div class="flex w-full gap-3">
            <a href="" class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /> </svg> </a>
            <a href=""> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" /> <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /> </svg> </a>
        </div>
        <h2 class="font-semibold text-xl">Sales Website</h2>
        <p class="opacity-70 text-xs line-clamp-2">
            Website for a company which Lorem ipsum dolor sit ame Lorem ipsum dolor, sit amet.
        </p>
        <div class="flex gap-2 mt-3 flex-wrap">
            <span class="text-xs bg-zinc-200/70 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border px-1.5 py-0.5 rounded" >HTML</span >
            <span class="text-xs bg-zinc-200/70 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border px-1.5 py-0.5 rounded" >CSS</span >
            <span class="text-xs bg-zinc-200/70 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border px-1.5 py-0.5 rounded" >Javascript</span >
        </div>
        <button class="mt-4 bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-100 hover:text-zinc-800 hover:bg-zinc-100 text-zinc-100 hover:border-zinc-800 dark:hover:border-zinc-100 focus-visible:outline-zinc-800/50 dark:focus-visible:outline-zinc-100/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline active:scale-[0.98]">
            Live Demo
        </button>
    </div>
</div>

<div class="rounded-lg overflow-hidden flex flex-wrap dark:text-zinc-50 text-zinc-950 ring-1 ring-zinc-300 dark:ring-zinc-700 dark:hover:ring-zinc-600 hover:ring-zinc-400 max-w-xl w-full m-3">
    <img class="basis-[13rem] w-full aspect-video shrink-0 grow object-cover object-left-top"
        src="https://images.unsplash.com/photo-1530435460869-d13625c69bbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&q=80" alt="company website" />
    <div class="p-4 flex flex-col gap-2 basis-[15rem] shrink-0 grow-[10]">
        <div class="flex w-full gap-3">
            <a href="" class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /> </svg> </a>
            <a href=""> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" /> <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /> </svg> </a>
        </div>
        <h2 class="font-semibold text-xl">Sales Website</h2>
        <p class="opacity-70 text-xs line-clamp-2">
            Website for a company which Lorem ipsum dolor sit ame Lorem ipsum dolor, sit amet.
        </p>
        <div class="flex gap-2 mt-3 flex-wrap">
            <span class="text-xs bg-zinc-200/60 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border px-1.5 py-0.5 rounded" >HTML</span >
            <span class="text-xs bg-zinc-200/60 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border px-1.5 py-0.5 rounded" >CSS</span >
            <span class="text-xs bg-zinc-200/60 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-300 text-zinc-900 border px-1.5 py-0.5 rounded" >Javascript</span >
        </div>
        <button class="my-4 bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-100 hover:text-zinc-800 hover:bg-zinc-100 text-zinc-100 hover:border-zinc-800 dark:hover:border-zinc-100 focus-visible:outline-zinc-800/50 dark:focus-visible:outline-zinc-100/50 px-4 py-1.5 rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline active:scale-[0.99]">
            Live Demo
        </button>
    </div>
</div>