Loading State Skeleton Grid of Cards

index.html

<div class="flex min-h-screen items-center p-10 flex-wrap justify-start gap-10 bg-gray-900">
  <div class="w-[300px] flex-none">
    <div class="relative space-y-5 rounded-2xl bg-white/5 p-4 overflow-hidden shadow-xl shadow-black/5 before:absolute before:inset-0 before:border-t before:border-rose-100/10 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-rose-100/20 before:to-transparent">
      <div class="h-64 rounded-lg bg-rose-100/10"></div>
      <div class="space-y-3">
        <div class="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
        <div class="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
        <div class="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
      </div>
    </div>
  </div>
</div>

tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
    theme: {
        extend: {
            colors: {
                gray: colors.stone,
            },
        },
        keyframes: {
            shimmer: {
                '100%': {
                    transform: 'translateX(100%)',
                },
            },
        },
    },
    plugins: [],
}