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 12

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

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
Table Skeleton
Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

JUGENDRA GANGWAR

3 weeks ago

20
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
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.7k
Innovative Developer & Digital Creator
Innovative Developer

gidy

1 year ago

1.5k
dsdd
dsdsd

fem dev

7 months ago

382
dashboard

Anonymous

1 month ago

204
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
walletp2p

Anonymous

1 year ago

2.2k
Skeleton loading card horizontal

Ahmed Malik

3 years ago

14.7k
ServerHub Interface

МОЙДОЫР

11 months ago

1.3k

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.