Table Skeleton

Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

This tailwind example is contributed by JUGENDRA GANGWAR, on 13-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Content loader, Shimmer, Ghost element, Content placeholder

Skeleton loader Other

Author JUGENDRA GANGWAR

Tailwind v3.4 20 1

Fork Fullscreen

<div class="min-h-screen bg-slate-50 p-4 sm:p-6 lg:p-8">
  <div class="mx-auto max-w-7xl">

<div class="mb-8 flex flex-wrap items-end justify-between gap-4">
      <div>
        <div class="mb-3 h-3 w-20 animate-pulse rounded bg-indigo-100"></div>
        <div class="h-8 w-48 max-w-full animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-4 w-64 max-w-full animate-pulse rounded bg-slate-200"></div>
      </div>
      <div class="h-10 w-32 animate-pulse rounded-xl bg-slate-200"></div>
    </div>

<div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-20 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-28 animate-pulse rounded bg-slate-100"></div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-24 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-24 animate-pulse rounded bg-slate-100"></div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-16 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-32 animate-pulse rounded bg-slate-100"></div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-24 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-28 animate-pulse rounded bg-slate-100"></div>
      </div>
    </div>
  
    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">

<div class="flex flex-col gap-4 border-b border-slate-100 p-5 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div class="h-5 w-36 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-44 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="flex flex-wrap gap-3">
          <div class="h-10 w-44 max-w-full animate-pulse rounded-xl bg-slate-100"></div>
          <div class="h-10 w-24 animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-x-auto">
        <div class="min-w-[720px]">
  
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 bg-slate-50/70 px-6 py-4">
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-3 animate-pulse rounded bg-slate-200"></div>
          </div>
    
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-indigo-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-36 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-20 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
   
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-32 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-28 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-24 animate-pulse rounded-full bg-amber-100"></div>
            <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>

<div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-rose-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-32 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-28 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-20 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
 
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-amber-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-36 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-24 animate-pulse rounded-full bg-rose-100"></div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>

<div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-sky-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-32 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-28 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-20 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
        </div>
      </div>
  
      <div class="flex flex-col gap-4 border-t border-slate-100 p-5 sm:flex-row sm:items-center sm:justify-between">
        <div class="h-3 w-40 animate-pulse rounded bg-slate-100"></div>
        <div class="flex items-center gap-2">
          <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
          <div class="h-9 w-9 animate-pulse rounded-lg bg-indigo-100"></div>
          <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
          <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Cockatoo

Lokesh H

2 months ago

126
Product Grid Skeleton
Responsive product grid skeleton built with Tailwind CSS for e-commerce storefronts and online marketplaces. Features animated image placeholders, product titles, pricing, filter chips, and button placeholders.

JUGENDRA GANGWAR

3 weeks ago

40
Chat Interface Skeleton
Messaging interface skeleton built with Tailwind CSS.

JUGENDRA GANGWAR

3 weeks ago

12
User Profile Skeleton
Profile page skeleton built with Tailwind CSS. Includes a cover banner, avatar, profile details, stats, navigation tabs, about section, and activity feed placeholders.

JUGENDRA GANGWAR

3 weeks ago

73
Image Gallery with Alpine.Js

Maxim

1 year ago

1.7k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Login with social media

Anonymous

5 days ago

7
InfoWindow Mapy rzemieślników Desktop

Antoni Wierzba

5 months ago

187
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Rathanak Phan

1 year ago

883
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

KULDEEP

1 year ago

1.4k
pile carde scroll
pile carde scroll

Omer fils ELENGA

9 months ago

654
carte visa black

Omer fils ELENGA

5 months ago

270

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.