Skeleton Responsive

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