Chat Interface Skeleton

Messaging interface skeleton built with Tailwind CSS.

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 4

Fork Fullscreen

<div class="min-h-screen bg-slate-100 p-3 sm:p-6">
  <div class="mx-auto max-w-7xl overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">

<div class="grid min-h-[700px] grid-cols-1 md:grid-cols-[280px_minmax(0,1fr)] lg:grid-cols-[320px_minmax(0,1fr)]">

<aside class="hidden border-r border-slate-200 md:block">

<div class="border-b border-slate-100 p-5">
          <div class="flex items-center justify-between">
            <div class="h-6 w-28 animate-pulse rounded-lg bg-slate-200"></div>
            <div class="h-9 w-9 animate-pulse rounded-xl bg-indigo-100"></div>
          </div>
          <div class="mt-5 h-10 w-full animate-pulse rounded-xl bg-slate-100"></div>
          <div class="mt-4 flex gap-2">
            <div class="h-7 w-14 animate-pulse rounded-full bg-indigo-100"></div>
            <div class="h-7 w-16 animate-pulse rounded-full bg-slate-100"></div>
            <div class="h-7 w-14 animate-pulse rounded-full bg-slate-100"></div>
          </div>
        </div>

<div class="border-b border-slate-100 bg-indigo-50/60 p-4">
          <div class="flex gap-3">
            <div class="relative h-11 w-11 shrink-0 animate-pulse rounded-full bg-indigo-200">
              <div class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-white"></div>
            </div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between gap-2">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-300"></div>
                <div class="h-3 w-8 animate-pulse rounded bg-slate-200"></div>
              </div>
              <div class="mt-3 h-3 w-full animate-pulse rounded bg-slate-200"></div>
              <div class="mt-2 h-3 w-2/3 animate-pulse rounded bg-slate-100"></div>
            </div>
          </div>
        </div>

<div class="border-b border-slate-100 p-4">
          <div class="flex gap-3">
            <div class="h-11 w-11 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between gap-2">
                <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
                <div class="h-3 w-8 animate-pulse rounded bg-slate-100"></div>
              </div>
              <div class="mt-3 h-3 w-5/6 animate-pulse rounded bg-slate-100"></div>
              <div class="mt-2 h-3 w-1/2 animate-pulse rounded bg-slate-100"></div>
            </div>
          </div>
        </div>

<div class="border-b border-slate-100 p-4">
          <div class="flex gap-3">
            <div class="h-11 w-11 shrink-0 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between gap-2">
                <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
                <div class="h-3 w-10 animate-pulse rounded bg-slate-100"></div>
              </div>
              <div class="mt-3 h-3 w-full animate-pulse rounded bg-slate-100"></div>
              <div class="mt-2 h-3 w-3/5 animate-pulse rounded bg-slate-100"></div>
            </div>
          </div>
        </div>

<div class="border-b border-slate-100 p-4">
          <div class="flex gap-3">
            <div class="h-11 w-11 shrink-0 animate-pulse rounded-full bg-amber-100"></div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between gap-2">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                <div class="h-3 w-8 animate-pulse rounded bg-slate-100"></div>
              </div>
              <div class="mt-3 h-3 w-4/5 animate-pulse rounded bg-slate-100"></div>
              <div class="mt-2 h-3 w-1/2 animate-pulse rounded bg-slate-100"></div>
            </div>
          </div>
        </div>

<div class="p-4">
          <div class="flex gap-3">
            <div class="h-11 w-11 shrink-0 animate-pulse rounded-full bg-rose-100"></div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between gap-2">
                <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
                <div class="h-3 w-10 animate-pulse rounded bg-slate-100"></div>
              </div>
              <div class="mt-3 h-3 w-full animate-pulse rounded bg-slate-100"></div>
              <div class="mt-2 h-3 w-3/5 animate-pulse rounded bg-slate-100"></div>
            </div>
          </div>
        </div>
      </aside>

<main class="flex min-w-0 flex-col">

<div class="flex items-center justify-between gap-3 border-b border-slate-200 p-4 sm:p-5">
          <div class="flex min-w-0 items-center gap-3">
            <div class="h-11 w-11 shrink-0 animate-pulse rounded-full bg-indigo-100"></div>
            <div class="min-w-0">
              <div class="h-4 w-32 max-w-full animate-pulse rounded bg-slate-200"></div>
              <div class="mt-2 h-3 w-20 animate-pulse rounded bg-emerald-100"></div>
            </div>
          </div>
          <div class="flex shrink-0 gap-2">
            <div class="h-9 w-9 animate-pulse rounded-xl bg-slate-100"></div>
            <div class="h-9 w-9 animate-pulse rounded-xl bg-slate-100"></div>
            <div class="hidden h-9 w-9 animate-pulse rounded-xl bg-slate-100 sm:block"></div>
          </div>
        </div>

<div class="flex-1 space-y-7 bg-slate-50/70 p-4 sm:p-6">

<div class="flex items-center justify-center">
            <div class="h-6 w-28 animate-pulse rounded-full bg-slate-200"></div>
          </div>

<div class="flex max-w-[85%] items-end gap-3 sm:max-w-[75%]">
            <div class="h-8 w-8 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
            <div class="min-w-0 flex-1">
              <div class="mb-2 h-3 w-20 animate-pulse rounded bg-slate-200"></div>
              <div class="rounded-2xl rounded-bl-md border border-slate-200 bg-white p-4">
                <div class="h-3 w-40 max-w-full animate-pulse rounded bg-slate-200"></div>
                <div class="mt-3 h-3 w-56 max-w-full animate-pulse rounded bg-slate-100"></div>
                <div class="mt-3 h-3 w-24 animate-pulse rounded bg-slate-100"></div>
              </div>
              <div class="mt-2 h-3 w-12 animate-pulse rounded bg-slate-200"></div>
            </div>
          </div>

<div class="ml-auto flex max-w-[85%] flex-col items-end sm:max-w-[75%]">
            <div class="w-fit max-w-full rounded-2xl rounded-br-md bg-indigo-100 p-4">
              <div class="h-3 w-48 max-w-full animate-pulse rounded bg-indigo-200"></div>
              <div class="mt-3 h-3 w-32 max-w-full animate-pulse rounded bg-indigo-200"></div>
            </div>
            <div class="mt-2 h-3 w-16 animate-pulse rounded bg-slate-200"></div>
          </div>

<div class="flex max-w-[85%] items-end gap-3 sm:max-w-[75%]">
            <div class="h-8 w-8 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
            <div class="min-w-0 flex-1">
              <div class="rounded-2xl rounded-bl-md border border-slate-200 bg-white p-4">
                <div class="h-3 w-52 max-w-full animate-pulse rounded bg-slate-200"></div>
                <div class="mt-3 h-3 w-36 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
              <div class="mt-2 h-3 w-12 animate-pulse rounded bg-slate-200"></div>
            </div>
          </div>

<div class="ml-auto flex max-w-[85%] flex-col items-end sm:max-w-[75%]">
            <div class="w-fit max-w-full rounded-2xl rounded-br-md bg-indigo-100 p-4">
              <div class="h-3 w-40 max-w-full animate-pulse rounded bg-indigo-200"></div>
            </div>
            <div class="mt-2 h-3 w-20 animate-pulse rounded bg-slate-200"></div>
          </div>

<div class="flex items-end gap-3">
            <div class="h-8 w-8 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
            <div class="flex h-11 items-center gap-2 rounded-2xl rounded-bl-md border border-slate-200 bg-white px-4">
              <div class="h-2 w-2 animate-pulse rounded-full bg-slate-300"></div>
              <div class="h-2 w-2 animate-pulse rounded-full bg-slate-300"></div>
              <div class="h-2 w-2 animate-pulse rounded-full bg-slate-300"></div>
            </div>
          </div>
        </div>

<div class="border-t border-slate-200 bg-white p-4 sm:p-5">
          <div class="flex items-center gap-3 rounded-2xl border border-slate-200 p-3">
            <div class="h-9 w-9 shrink-0 animate-pulse rounded-xl bg-slate-100"></div>
            <div class="h-4 min-w-0 flex-1 animate-pulse rounded bg-slate-100"></div>
            <div class="hidden h-9 w-9 shrink-0 animate-pulse rounded-xl bg-slate-100 sm:block"></div>
            <div class="h-10 w-10 shrink-0 animate-pulse rounded-xl bg-indigo-100"></div>
          </div>
          <div class="mx-auto mt-3 h-3 w-36 animate-pulse rounded bg-slate-100"></div>
        </div>
      </main>
    </div>
  </div>
</div>

Related Examples

Cockatoo

Lokesh H

2 months ago

77
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

16 hours ago

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

JUGENDRA GANGWAR

16 hours ago

3
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

15 hours ago

3
Concert ticket

Elijah Davis

3 years ago

14.1k
Subscription Plans
Subscription Plans

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

706
dashboard

Anonymous

1 week ago

104
cards
cards with background animation

Anonymous

3 years ago

11.9k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Hamza Atig

9 months ago

829
admin panel

Anonymous

2 years ago

3.5k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k

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.