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 3

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

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

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

JUGENDRA GANGWAR

16 hours ago

4
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.2k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.9k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

M Junaid

1 year ago

1.5k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Walid Ahmad

1 year ago

1.8k
tab1
table

Anonymous

2 weeks ago

15
Calculator
A Basic Calculator

Debbie F

2 years ago

2.5k
re schedule

Anonymous

2 weeks ago

69
profile
user profile

gidy

1 year ago

1.1k

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.