Skeleton List

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