tailwind skeleton css

tw-skeleton.css

.skeleton {
  --text-opacity: 0;
  background-image: linear-gradient(100deg, #edf2f7 0%, #f4f7fa 20%, #edf2f7 40%);
  background-position: 50%;
  background-size: 200%;
  animation: skeleton 1.25s infinite linear;
}

.skeleton-teal {
  background-image: linear-gradient(100deg, #b4c5f8 0%, #cad8f9 20%, #b4c5f8 40%);
}

.skeleton-white {
  background-image: linear-gradient(100deg, #f9fafb 0%, #ffffff 20%, #f9fafb 40%);
}

@keyframes skeleton {
  0% {
    background-position: 50%;
  }
  50%, 100% {
    background-position: -100%
  }
}

<div class="max-w-5xl mx-auto py-6 sm:px-6 lg:px-8">
  <div v-if="inquiry === false" class="max-w-sm mx-auto bg-white rounded-lg shadow relative px-4 py-5">
    <div class="flex items-center justify-center mb-6 relative">
      <div class="absolute w-24 border border-3 border-gray-300 border-dashed" />
      <div class="w-16 h-16 relative skeleton rounded" />
      <div class="w-8 h-8 skeleton p-2 rounded-full mx-4 relative" />
      <div class="w-16 h-16 relative skeleton rounded" />
    </div>
    <h3 class="text-lg font-medium leading-6 text-gray-900 text-center mb-6 skeleton w-full rounded"> &nbsp; </h3>
    <alert-accent type="warning">
      <span class="block w-24 skeleton rounded mb-1"> &nbsp; </span>
      <span class="block w-32 skeleton rounded"> &nbsp; </span>
    </alert-accent>
    <div class="flex items-center justify-around mt-6 space-x-2">
      <push-button class="w-full" state="disabled">
        &nbsp;
      </push-button>
      <push-button theme="indigo-dark" class="w-full" state="disabled">
        &nbsp;
      </push-button>
    </div>
    <div class="mt-6 text-xs mx-auto text-gray-600 w-32 skeleton rounded">
      &nbsp;
    </div>
  </div>