card with a gradient blur transition effect

by sleep10000

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="w-[100vw] h-[100vh] flex items-center justify-center">
  <div class="relative group cursor-pointer elssss" style="transition: 300ms">
    <div
      class="relative overflow-hidden flex items-end z-2 rounded-[40px]"
      style="width: 60vw; height: 80vh"
    >
      <div class="absolute z-1 w-full h-100%">
        <img
          src="https://images.unsplash.com/photo-1566865204669-c7b93be298bd?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          class="object-cover con elchi"
          alt=""
          style="width: 60vw; height: 80vh"
        />
      </div>
      <div class="absolute z-3 w-full h-full flex items-end">
        <!-- <div
            class="absolute z-100 w-full h-[40%] left-[10px] bottom-[10px] shadow-[inset_6px_0px_0px] blur-[5px] shadow-white/12 rounded-bl-[40px]"
          >
          </div> -->
        <div class="absolute w-full h-auto">
          <div
            class="relative z-10 text-white p-[12px] pb-[12px] w-full gap-[10px] items-center elchi"
          >
            <div class="w-full">
              <div class="flex items-center justify-between">
                <h4 class="text-2xl">Fearless Rip5682</h4>
                <div class="rounded-full p-[10px] py-[3px] bg-black/60">
                  $ 22.3
                </div>
              </div>
              <p class="opacity-60 text-[12px] mt-[6px] font-thin">
                /r/css Tailwind is GOOD！Tailwind is GOOD！Tailwind is GOOD！
              </p>
            </div>
            <div class="mt-[6px]">
              <ul class="flex gap-[4px] text-[12px]">
                <li class="rounded-full p-[8px] py-[2px] bg-black/30">Karma</li>
                <li class="rounded-full p-[8px] py-[2px] bg-black/30">
                  reddit
                </li>
                <li...