Skeleton Themes

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