Tailwind CSS Skeleton Components

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Default Light Theme -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Default Theme</p>
    <div class="flex items-center space-x-4">
      <div class="skeleton h-12 w-12 bg-gray-200 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/2 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
  </div>
  
  <!-- Dark Theme -->
  <div class="bg-gray-800 p-4 rounded-lg">
    <p class="text-sm font-medium text-gray-300 mb-2">Dark Theme</p>
    <div class="flex items-center space-x-4">
      <div class="skeleton h-12 w-12 bg-gray-700 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-3/4 bg-gray-700 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/2 bg-gray-700 animate-pulse rounded"></div>
      </div>
    </div>
  </div>
  
  <!-- Blue Theme -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Blue Theme</p>
    <div class="flex items-center space-x-4">
      <div class="skeleton h-12 w-12 bg-blue-100 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-3/4 bg-blue-100 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/2 bg-blue-100 animate-pulse rounded"></div>
      </div>
    </div>
  </div>
  
  <!-- Brand Theme -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Brand Theme</p>
    <div class="flex items-center space-x-4">
      <div class="skeleton h-12 w-12 bg-indigo-100 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-3/4 bg-indigo-100 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/2 bg-indigo-100 animate-pulse rounded"></div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="w-full max-w-4xl mx-auto p-4">
  <div class="skeleton h-8 w-full bg-gray-200 animate-pulse rounded mb-4"></div>
  <div class="grid grid-cols-4 gap-4 mb-4">
    <div class="skeleton h-6 bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-6 bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-6 bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-6 bg-gray-200 animate-pulse rounded"></div>
  </div>
  
  <div class="space-y-3">
    <!-- Row 1 -->
    <div class="grid grid-cols-4 gap-4">
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
    </div>
    
    <!-- Row 2 -->
    <div class="grid grid-cols-4 gap-4">
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
    </div>
    
    <!-- Row 3 -->
    <div class="grid grid-cols-4 gap-4">
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 bg-gray-200 animate-pulse rounded"></div>
    </div>
  </div>
</div> 
                        

                            <div class="w-full p-4 mx-auto">
  <!-- Responsive Skeleton Layout -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="flex flex-col space-y-3">
      <div class="skeleton h-40 w-full bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 w-2/3 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
    </div>
    
    <!-- Card 2 -->
    <div class="flex flex-col space-y-3">
      <div class="skeleton h-40 w-full bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 w-3/4 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-4 w-4/5 bg-gray-200 animate-pulse rounded"></div>
    </div>
    
    <!-- Card 3 (Hidden on small screens) -->
    <div class="hidden lg:flex flex-col space-y-3">
      <div class="skeleton h-40 w-full bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-5 w-1/2 bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
      <div class="skeleton h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
    </div>
  </div>
  
  <!-- Responsive List Skeleton -->
  <div class="mt-10">
    <div class="skeleton h-6 w-1/4 bg-gray-200 animate-pulse rounded mb-6"></div>
    
    <div class="space-y-4">
      <!-- Responsive List Item -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-3 items-center">
        <div class="skeleton h-16 md:h-10 w-full md:w-10 bg-gray-200 animate-pulse rounded md:rounded-full"></div>
        <div class="col-span-3 space-y-2">
          <div class="skeleton h-4 w-full md:w-3/4 bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-3 w-2/3 bg-gray-200 animate-pulse rounded"></div>
        </div>
      </div>
      
      <!-- Responsive List Item -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-3 items-center">
        <div class="skeleton h-16 md:h-10 w-full md:w-10 bg-gray-200 animate-pulse rounded md:rounded-full"></div>
        <div class="col-span-3 space-y-2">
          <div class="skeleton h-4 w-full md:w-2/3 bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-3 w-3/4 bg-gray-200 animate-pulse rounded"></div>
        </div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="w-full max-w-md mx-auto p-4">
  <div class="space-y-4">
    <!-- List Item 1 -->
    <div class="flex items-center space-x-4">
      <div class="skeleton h-10 w-10 bg-gray-200 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/2 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
    
    <!-- List Item 2 -->
    <div class="flex items-center space-x-4">
      <div class="skeleton h-10 w-10 bg-gray-200 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-2/3 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
    
    <!-- List Item 3 -->
    <div class="flex items-center space-x-4">
      <div class="skeleton h-10 w-10 bg-gray-200 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/3 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
    
    <!-- List Item 4 -->
    <div class="flex items-center space-x-4">
      <div class="skeleton h-10 w-10 bg-gray-200 animate-pulse rounded-full"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton h-4 w-2/3 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-3 w-1/2 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="max-w-4xl mx-auto p-4">
  <!-- Page Layout Skeleton -->
  <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
    <!-- Sidebar -->
    <div class="md:col-span-3 space-y-4">
      <div class="flex items-center space-x-3">
        <div class="skeleton h-10 w-10 bg-gray-200 animate-pulse rounded-full"></div>
        <div class="skeleton h-4 w-32 bg-gray-200 animate-pulse rounded"></div>
      </div>
      
      <div class="space-y-2">
        <div class="skeleton h-6 w-full bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-6 w-full bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-6 w-full bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-6 w-full bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-6 w-full bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
    
    <!-- Main Content Area -->
    <div class="md:col-span-9 space-y-6">
      <!-- Header -->
      <div class="flex justify-between items-center">
        <div class="skeleton h-8 w-48 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-8 w-20 bg-gray-200 animate-pulse rounded"></div>
      </div>
      
      <!-- Card Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Card 1 -->
        <div class="flex flex-col space-y-3 border border-gray-200 p-3 rounded">
          <div class="skeleton h-32 w-full bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-5 w-2/3 bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
        </div>
        
        <!-- Card 2 -->
        <div class="flex flex-col space-y-3 border border-gray-200 p-3 rounded">
          <div class="skeleton h-32 w-full bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-5 w-1/2 bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
        </div>
        
        <!-- Card 3 -->
        <div class="flex flex-col space-y-3 border border-gray-200 p-3 rounded">
          <div class="skeleton h-32 w-full bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-5 w-3/4 bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
          <div class="skeleton h-4 w-2/3 bg-gray-200 animate-pulse rounded"></div>
        </div>
      </div>
      
      <!-- Pagination -->
      <div class="flex justify-center space-x-2 mt-6">
        <div class="skeleton h-8 w-8 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-8 w-8 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-8 w-8 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-8 w-8 bg-gray-200 animate-pulse rounded"></div>
        <div class="skeleton h-8 w-8 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-4 p-4 max-w-md mx-auto">
  <!-- Circle Skeleton -->
  <div class="skeleton h-24 w-24 rounded-full bg-gray-200 animate-pulse mx-auto"></div>
  
  <!-- Medium Circle Skeleton -->
  <div class="skeleton h-16 w-16 rounded-full bg-gray-200 animate-pulse mx-auto"></div>
  
  <!-- Small Circle Skeleton -->
  <div class="skeleton h-10 w-10 rounded-full bg-gray-200 animate-pulse mx-auto"></div>
</div> 
                        

                            <div class="flex w-full max-w-md mx-auto p-4">
  <div class="flex w-full flex-col gap-4">
    <div class="skeleton h-48 w-full bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-5 w-1/2 bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-4 w-full bg-gray-200 animate-pulse rounded"></div>
    <div class="skeleton h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
  </div>
</div> 
                        

                            <div class="flex w-full max-w-md mx-auto p-4">
  <div class="flex w-full flex-col gap-4">
    <!-- User with Avatar Skeleton Layout -->
    <div class="flex items-center gap-4">
      <!-- Avatar Circle Skeleton -->
      <div class="skeleton h-16 w-16 shrink-0 rounded-full bg-gray-200 animate-pulse"></div>
      <div class="flex flex-col gap-4">
        <!-- Username Skeleton -->
        <div class="skeleton h-4 w-20 bg-gray-200 animate-pulse rounded"></div>
        <!-- User Status Skeleton -->
        <div class="skeleton h-4 w-28 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
    <!-- Content Area Skeleton -->
    <div class="skeleton h-32 w-full bg-gray-200 animate-pulse rounded"></div>
  </div>
</div> 
                        

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Pulse Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Pulse Animation</p>
    <div class="skeleton h-20 w-full bg-gray-200 animate-pulse rounded"></div>
  </div>
  
  <!-- Gradient Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Gradient Animation</p>
    <div class="skeleton h-20 w-full rounded overflow-hidden">
      <div class="h-full w-full bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 animate-[shimmer_2s_infinite]"></div>
    </div>
  </div>
  
  <!-- Wave Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Wave Animation</p>
    <div class="skeleton h-20 w-full bg-gray-200 rounded relative overflow-hidden">
      <div class="absolute inset-0 -translate-x-full animate-[wave_2s_infinite] bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200"></div>
    </div>
  </div>
  
  <!-- Blink Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Blink Animation</p>
    <div class="skeleton h-20 w-full bg-gray-200 rounded animate-[blink_1.5s_ease-in-out_infinite]"></div>
  </div>
  
  <style>
    @keyframes shimmer {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }
    
    @keyframes wave {
      100% { transform: translateX(100%); }
    }
    
    @keyframes blink {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.8; }
    }
  </style>
</div>