<div class="flex flex-col border border-slate-150 dark:border-navy-500">
    <div class="flex  space-x-5 px-5 py-4">
      <div
        class="skeleton animate-wave size-16 rounded-full bg-slate-150 dark:bg-navy-500"
      ></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div
          class="skeleton animate-wave h-3 w-full rounded-sm bg-slate-150 dark:bg-navy-500"
        ></div>
        <div
          class="skeleton animate-wave h-3 w-full rounded-sm bg-slate-150 dark:bg-navy-500"
        ></div>
      </div>
    </div>
    <div
      class="skeleton animate-wave h-48 w-full bg-slate-150 dark:bg-navy-500"
    ></div>
    <div class="w-full px-6 py-4">
      <div
        class="skeleton animate-wave h-3 w-full rounded-sm bg-slate-150 dark:bg-navy-500"
      ></div>
      <div
        class="skeleton animate-wave mt-4 h-3 w-8/12 rounded-sm bg-slate-150 dark:bg-navy-500"
      ></div>
    </div>
  </div>

              

                
  <div class="flex flex-col">
    <div
      class="skeleton animate-wave h-48 w-full rounded-lg bg-slate-150 dark:bg-navy-500"
    ></div>
    <div class="flex  space-x-5 py-4">
      <div
        class="skeleton animate-wave size-16 rounded-full bg-slate-150 dark:bg-navy-500"
      ></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div
          class="skeleton animate-wave h-3 w-10/12 rounded-sm bg-slate-150 dark:bg-navy-500"
        ></div>
        <div
          class="skeleton animate-wave h-6 w-full rounded-sm bg-slate-150 dark:bg-navy-500"
        ></div>
      </div>
    </div>
  </div>

              

                
  <div
    class="flex flex-col space-y-4 border border-slate-150 dark:border-navy-500"
  >
    <div class="px-4 pt-4">
      <div
        class="skeleton animate-wave h-8 w-10/12 rounded-full bg-slate-150 dark:bg-navy-500"
      ></div>
    </div>
    <div
      class="skeleton animate-wave h-48 w-full bg-slate-150 dark:bg-navy-500"
    ></div>
    <div class="flex flex-1 flex-col justify-between space-y-4 p-4">
      <div
        class="skeleton animate-wave h-4 w-9/12 rounded-sm bg-slate-150 dark:bg-navy-500"
      ></div>
      <div
        class="skeleton animate-wave h-4 w-6/12 rounded-sm bg-slate-150 dark:bg-navy-500"
      ></div>
      <div
        class="skeleton animate-wave h-4 w-full rounded-sm bg-slate-150 dark:bg-navy-500"
      ></div>
    </div>
  </div>

              

                
  <div
    class="flex animate-pulse flex-col border border-slate-150 dark:border-navy-500"
  >
    <div class="flex  space-x-5 px-5 py-4">
      <div class="size-16 rounded-full bg-slate-150 dark:bg-navy-500"></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div class="h-3 w-full rounded-sm bg-slate-150 dark:bg-navy-500"></div>
        <div class="h-3 w-full rounded-sm bg-slate-150 dark:bg-navy-500"></div>
      </div>
    </div>
    <div class="h-48 w-full bg-slate-150 dark:bg-navy-500"></div>
    <div class="w-full px-6 py-4">
      <div class="h-3 w-full rounded-sm bg-slate-150 dark:bg-navy-500"></div>
      <div class="mt-4 h-3 w-8/12 rounded-sm bg-slate-150 dark:bg-navy-500"></div>
    </div>
  </div>

                
              

                
  <div class="flex animate-pulse flex-col">
    <div class="h-48 w-full rounded-lg bg-slate-150 dark:bg-navy-500"></div>
    <div class="flex  space-x-5 py-4">
      <div class="size-16 rounded-full bg-slate-150 dark:bg-navy-500"></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div class="h-3 w-10/12 rounded-sm bg-slate-150 dark:bg-navy-500"></div>
        <div class="h-6 w-full rounded-sm bg-slate-150 dark:bg-navy-500"></div>
      </div>
    </div>
  </div>

              

                
  <div
    class="flex animate-pulse flex-col space-y-4 border border-slate-150 dark:border-navy-500"
  >
    <div class="px-4 pt-4">
      <div class="h-8 w-10/12 rounded-full bg-slate-150 dark:bg-navy-500"></div>
    </div>
    <div class="h-48 w-full bg-slate-150 dark:bg-navy-500"></div>
    <div class="flex flex-1 flex-col justify-between space-y-4 p-4">
      <div class="h-4 w-9/12 rounded-sm bg-slate-150 dark:bg-navy-500"></div>
      <div class="h-4 w-6/12 rounded-sm bg-slate-150 dark:bg-navy-500"></div>
      <div class="h-4 w-full rounded-sm bg-slate-150 dark:bg-navy-500"></div>
    </div>
  </div>