Components

Tailwind CSS Skeleton Components - Madhuranjan UI

Discover a collection of versatile skeleton loaders built with Tailwind CSS. These placeholders help improve user experience during content loading states and support both light and dark themes.

Want to build your own custom skeleton loader? Use our Tailwind Skeleton Generator to instantly turn your HTML into responsive, beautiful skeleton components with support for dark mode no setup needed.

Skeleton with Avatar, Title & Description

A commonly used skeleton layout with an avatar, heading, and short description.

1<div class="space-y-4 p-4 max-w-md w-full mx-auto">
2  <!-- Avatar + Title -->
3  <div class="flex items-center space-x-4">
4    <div class="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse"></div>
5    <div class="flex-1 space-y-2">
6      <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 animate-pulse"></div>
7      <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-1/2 animate-pulse"></div>
8    </div>
9  </div>
10

Video Skeleton Placeholder

A responsive skeleton that mimics a video player layout with centered icon.

Loading...
1<div role="status" class="flex items-center justify-center h-56 w-full max-w-md bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700">
2  <svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
3    <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
4    <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM9 13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Zm4 .382a1 1 0 0 1-1.447.894L10 13v-2l1.553-1.276a1 1 0 0 1 1.447.894v2.764Z"/>
5  </svg>
6  <span class="sr-only">Loading...</span>
7</div>
8

Text Cloud Skeleton

A more complex multi-line text skeleton that reflects realistic content flow.

Loading...
1<div class="flex justify-center items-center p-5">
2  <div role="status" class="space-y-2.5 animate-pulse max-w-lg">
3  <div class="flex items-center w-full">
4    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
5    <div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
6    <div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
7  </div>
8
9  <div class="flex items-center w-full max-w-[480px]">
10    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>

Profile Card Skeleton

Simulates a user profile card with avatar, name, subtitle, and content lines.

1<div role="status" class="w-full max-w-sm p-4 border border-gray-200 rounded-lg shadow animate-pulse dark:bg-gray-800 dark:border-gray-700">
2  <div class="flex items-center space-x-4 mb-4">
3    <div class="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-600"></div>
4    <div class="flex-1">
5      <div class="h-4 bg-gray-300 rounded w-3/4 mb-2 dark:bg-gray-600"></div>
6      <div class="h-3 bg-gray-200 rounded w-1/2 dark:bg-gray-700"></div>
7    </div>
8  </div>
9  <div class="h-3 bg-gray-200 rounded w-full mb-2 dark:bg-gray-700"></div>
10  <div class="h-3 bg-gray-200 rounded w-5/6 mb-2 dark:bg-gray-700"></div>
SpinnerTable