Skeleton Composition

                    <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>