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.

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

Fork Fullscreen

<div class="min-h-screen bg-slate-50 p-4 sm:p-8">
  <div class="mx-auto max-w-5xl">
    <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
      <div class="relative h-40 animate-pulse bg-gradient-to-r from-indigo-100 via-violet-100 to-sky-100 sm:h-56">
        <div class="absolute right-5 top-5 h-9 w-9 rounded-xl bg-white/70"></div>
      </div>
      <div class="px-5 pb-6 sm:px-8">
        <div class="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
          <div class="min-w-0">
            <div class="-mt-14 h-28 w-28 animate-pulse rounded-full border-4 border-white bg-slate-200 sm:-mt-16 sm:h-32 sm:w-32"></div>
            <div class="mt-5">
              <div class="h-7 w-48 max-w-full animate-pulse rounded-lg bg-slate-200"></div>
              <div class="mt-3 h-4 w-36 animate-pulse rounded bg-slate-100"></div>
              <div class="mt-4 h-3 w-64 max-w-full animate-pulse rounded bg-slate-100"></div>
              <div class="mt-2 h-3 w-48 max-w-full animate-pulse rounded bg-slate-100"></div>
              <div class="mt-5 flex flex-wrap gap-x-5 gap-y-3">
                <div class="flex items-center gap-2">
                  <div class="h-4 w-4 animate-pulse rounded bg-indigo-100"></div>
                  <div class="h-3 w-28 animate-pulse rounded bg-slate-100"></div>
                </div>
                <div class="flex items-center gap-2">
                  <div class="h-4 w-4 animate-pulse rounded bg-indigo-100"></div>
                  <div class="h-3 w-32 animate-pulse rounded bg-slate-100"></div>
                </div>
              </div>
            </div>
          </div>

<div class="flex gap-3 sm:pb-1">
            <div class="h-10 w-28 animate-pulse rounded-xl bg-indigo-100"></div>
            <div class="h-10 w-24 animate-pulse rounded-xl bg-slate-100"></div>
          </div>
        </div>

<div class="mt-8 grid grid-cols-3 gap-3 border-t border-slate-100 pt-6 sm:max-w-lg sm:gap-8">
          <div>
            <div class="h-6 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="mt-2 h-3 w-20 max-w-full animate-pulse rounded bg-slate-100"></div>
          </div>
          <div>
            <div class="h-6 w-14 animate-pulse rounded bg-slate-200"></div>
            <div class="mt-2 h-3 w-16 max-w-full animate-pulse rounded bg-slate-100"></div>
          </div>
          <div>
            <div class="h-6 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="mt-2 h-3 w-20 max-w-full animate-pulse rounded bg-slate-100"></div>
          </div>
        </div>
      </div>
    </div>

<div class="mt-6 flex gap-6 overflow-hidden border-b border-slate-200 px-2">
      <div class="shrink-0 border-b-2 border-indigo-200 px-2 pb-4 pt-2">
        <div class="h-3 w-16 animate-pulse rounded bg-indigo-100"></div>
      </div>
      <div class="shrink-0 px-2 pb-4 pt-2">
        <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
      </div>
      <div class="shrink-0 px-2 pb-4 pt-2">
        <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
      </div>
      <div class="shrink-0 px-2 pb-4 pt-2">
        <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
      </div>
    </div>

<div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">

<div class="h-fit rounded-2xl border border-slate-200 bg-white p-5 sm:p-6">
        <div class="h-5 w-24 animate-pulse rounded bg-slate-200"></div>

<div class="mt-6 space-y-3">
          <div class="h-3 w-full animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-5/6 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-4/5 animate-pulse rounded bg-slate-100"></div>
        </div>

<div class="mt-7 h-4 w-28 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 flex flex-wrap gap-2">
          <div class="h-7 w-20 animate-pulse rounded-full bg-indigo-100"></div>
          <div class="h-7 w-24 animate-pulse rounded-full bg-violet-100"></div>
          <div class="h-7 w-16 animate-pulse rounded-full bg-slate-100"></div>
          <div class="h-7 w-20 animate-pulse rounded-full bg-slate-100"></div>
        </div>
      </div>

<div class="space-y-5 lg:col-span-2">

<div class="rounded-2xl border border-slate-200 bg-white p-5 sm:p-6">
          <div class="flex items-center gap-3">
            <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
            <div class="flex-1">
              <div class="h-3 w-32 animate-pulse rounded bg-slate-200"></div>
              <div class="mt-2 h-3 w-24 animate-pulse rounded bg-slate-100"></div>
            </div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>

<div class="mt-5 space-y-3">
            <div class="h-3 w-full animate-pulse rounded bg-slate-100"></div>
            <div class="h-3 w-5/6 animate-pulse rounded bg-slate-100"></div>
          </div>

<div class="mt-5 aspect-[16/7] animate-pulse rounded-xl bg-slate-100"></div>

<div class="mt-5 flex gap-5 border-t border-slate-100 pt-4">
            <div class="h-4 w-16 animate-pulse rounded bg-slate-100"></div>
            <div class="h-4 w-20 animate-pulse rounded bg-slate-100"></div>
            <div class="h-4 w-16 animate-pulse rounded bg-slate-100"></div>
          </div>
        </div>

<div class="rounded-2xl border border-slate-200 bg-white p-5 sm:p-6">
          <div class="flex items-center gap-3">
            <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="flex-1">
              <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
              <div class="mt-2 h-3 w-20 animate-pulse rounded bg-slate-100"></div>
            </div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>

<div class="mt-5 space-y-3">
            <div class="h-3 w-full animate-pulse rounded bg-slate-100"></div>
            <div class="h-3 w-2/3 animate-pulse rounded bg-slate-100"></div>
          </div>

<div class="mt-5 flex gap-3">
            <div class="h-16 w-16 animate-pulse rounded-xl bg-slate-100 sm:h-20 sm:w-20"></div>
            <div class="h-16 w-16 animate-pulse rounded-xl bg-slate-100 sm:h-20 sm:w-20"></div>
            <div class="h-16 w-16 animate-pulse rounded-xl bg-slate-100 sm:h-20 sm:w-20"></div>
          </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
Table Skeleton
Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

JUGENDRA GANGWAR

3 weeks ago

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

JUGENDRA GANGWAR

3 weeks ago

12
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

ishimwe shadad

1 year ago

1.7k
my carte visa
my carte visa

Omer fils ELENGA

5 months ago

384
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.7k
LED Dot Matrix Display
LED Dot Matrix Display

Omer fils ELENGA

4 weeks ago

207
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

794
HTMLCODE
123

Anonymous

1 year ago

1k
Skeleton loader for Blog post and Article card
content placeholder for cards

Anja Müller

3 years ago

8.7k

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.