Complete Website Skeleton Loader

A complete, responsive website skeleton loader built with Tailwind CSS. Includes a navigation bar, hero section, search bar, category cards, featured content grid, sidebar widgets, newsletter section, and foote.

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

Author JUGENDRA GANGWAR

Tailwind v3.4 5

Fork Fullscreen

<div class="min-h-screen bg-slate-50 text-slate-900">
  <div class="bg-slate-900 px-4 py-3">
    <div class="mx-auto flex max-w-7xl items-center justify-center gap-3">
      <div class="h-3 w-24 animate-pulse rounded-full bg-slate-700"></div>
      <div class="h-3 w-40 animate-pulse rounded-full bg-slate-800"></div>
    </div>
  </div>

<header class="border-b border-slate-200 bg-white">
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-5 lg:px-8">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 animate-pulse rounded-xl bg-slate-200"></div>
        <div class="space-y-2">
          <div class="h-4 w-28 animate-pulse rounded bg-slate-200"></div>
          <div class="h-2.5 w-20 animate-pulse rounded bg-slate-100"></div>
        </div>
      </div>

<nav class="hidden items-center gap-8 md:flex">
        <div class="h-3 w-14 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-14 animate-pulse rounded bg-slate-200"></div>
        <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
      </nav>

<div class="flex items-center gap-3">
        <div class="hidden h-10 w-20 animate-pulse rounded-lg bg-slate-100 sm:block"></div>
        <div class="h-10 w-24 animate-pulse rounded-lg bg-slate-200"></div>
      </div>
    </div>
  </header>

<main>
    <section class="border-b border-slate-200 bg-white">
      <div class="mx-auto grid max-w-7xl items-center gap-12 px-5 py-16 md:py-24 lg:grid-cols-2 lg:px-8">
        <div class="space-y-6">
          <div class="h-6 w-36 animate-pulse rounded-full bg-slate-100"></div>
          <div class="space-y-3">
            <div class="h-9 w-full max-w-lg animate-pulse rounded-lg bg-slate-200 sm:h-12"></div>
            <div class="h-9 w-4/5 max-w-md animate-pulse rounded-lg bg-slate-200 sm:h-12"></div>
          </div>
          <div class="space-y-2">
            <div class="h-4 w-full max-w-lg animate-pulse rounded bg-slate-100"></div>
            <div class="h-4 w-11/12 max-w-md animate-pulse rounded bg-slate-100"></div>
            <div class="h-4 w-2/3 animate-pulse rounded bg-slate-100"></div>
          </div>
          <div class="flex flex-wrap gap-4 pt-2">
            <div class="h-12 w-36 animate-pulse rounded-xl bg-slate-200"></div>
            <div class="h-12 w-32 animate-pulse rounded-xl border border-slate-200 bg-slate-50"></div>
          </div>
          <div class="flex items-center gap-3 pt-3">
            <div class="flex -space-x-2">
              <div class="h-9 w-9 animate-pulse rounded-full border-2 border-white bg-slate-200"></div>
              <div class="h-9 w-9 animate-pulse rounded-full border-2 border-white bg-slate-300"></div>
              <div class="h-9 w-9 animate-pulse rounded-full border-2 border-white bg-slate-200"></div>
            </div>
            <div class="space-y-2">
              <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
              <div class="h-2.5 w-36 animate-pulse rounded bg-slate-100"></div>
            </div>
          </div>
        </div>

<div class="relative">
          <div class="absolute -inset-4 rounded-3xl bg-slate-100"></div>
          <div class="relative space-y-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
            <div class="flex items-center justify-between">
              <div class="h-4 w-32 animate-pulse rounded bg-slate-200"></div>
              <div class="h-8 w-20 animate-pulse rounded-lg bg-slate-100"></div>
            </div>
            <div class="h-48 animate-pulse rounded-xl bg-slate-100 sm:h-60"></div>
            <div class="grid grid-cols-3 gap-3">
              <div class="space-y-3 rounded-xl bg-slate-50 p-3">
                <div class="h-3 w-12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-6 w-16 animate-pulse rounded bg-slate-300"></div>
              </div>
              <div class="space-y-3 rounded-xl bg-slate-50 p-3">
                <div class="h-3 w-12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-6 w-16 animate-pulse rounded bg-slate-300"></div>
              </div>
              <div class="space-y-3 rounded-xl bg-slate-50 p-3">
                <div class="h-3 w-12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-6 w-16 animate-pulse rounded bg-slate-300"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="mx-auto max-w-7xl px-5 py-14 lg:px-8">
      <div class="mx-auto mb-10 max-w-2xl space-y-3 text-center">
        <div class="mx-auto h-7 w-48 animate-pulse rounded bg-slate-200"></div>
        <div class="mx-auto h-4 w-full max-w-md animate-pulse rounded bg-slate-100"></div>
      </div>

<div class="mx-auto mb-10 flex max-w-2xl items-center gap-3 rounded-xl border border-slate-200 bg-white p-3">
        <div class="h-5 w-5 shrink-0 animate-pulse rounded bg-slate-200"></div>
        <div class="h-4 flex-1 animate-pulse rounded bg-slate-100"></div>
        <div class="h-10 w-24 animate-pulse rounded-lg bg-slate-200"></div>
      </div>

<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
        <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 h-12 w-12 animate-pulse rounded-xl bg-slate-200"></div>
          <div class="mb-2 h-4 w-24 max-w-full animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 h-12 w-12 animate-pulse rounded-xl bg-slate-100"></div>
          <div class="mb-2 h-4 w-20 max-w-full animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-14 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 h-12 w-12 animate-pulse rounded-xl bg-slate-200"></div>
          <div class="mb-2 h-4 w-24 max-w-full animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 h-12 w-12 animate-pulse rounded-xl bg-slate-100"></div>
          <div class="mb-2 h-4 w-20 max-w-full animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-14 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 h-12 w-12 animate-pulse rounded-xl bg-slate-200"></div>
          <div class="mb-2 h-4 w-24 max-w-full animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 h-12 w-12 animate-pulse rounded-xl bg-slate-100"></div>
          <div class="mb-2 h-4 w-20 max-w-full animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-14 animate-pulse rounded bg-slate-100"></div>
        </div>
      </div>
    </section>

<section class="border-y border-slate-200 bg-white">
      <div class="mx-auto max-w-7xl px-5 py-14 lg:px-8">
        <div class="mb-8 flex items-end justify-between gap-4">
          <div class="space-y-3">
            <div class="h-7 w-48 animate-pulse rounded bg-slate-200"></div>
            <div class="h-4 w-64 max-w-full animate-pulse rounded bg-slate-100"></div>
          </div>
          <div class="hidden h-10 w-24 animate-pulse rounded-lg bg-slate-100 sm:block"></div>
        </div>

<div class="grid gap-8 lg:grid-cols-3">
          <div class="grid gap-6 sm:grid-cols-2 lg:col-span-2">
            <article class="overflow-hidden rounded-2xl border border-slate-200">
              <div class="h-48 animate-pulse bg-slate-200 sm:h-56"></div>
              <div class="space-y-4 p-5">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
                <div class="h-5 w-11/12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-4 w-full animate-pulse rounded bg-slate-100"></div>
                <div class="h-4 w-3/4 animate-pulse rounded bg-slate-100"></div>
                <div class="flex items-center gap-3 pt-2">
                  <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200"></div>
                  <div class="space-y-2">
                    <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                    <div class="h-2.5 w-16 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
              </div>
            </article>

<article class="overflow-hidden rounded-2xl border border-slate-200">
              <div class="h-48 animate-pulse bg-slate-100 sm:h-56"></div>
              <div class="space-y-4 p-5">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
                <div class="h-5 w-10/12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-4 w-full animate-pulse rounded bg-slate-100"></div>
                <div class="h-4 w-2/3 animate-pulse rounded bg-slate-100"></div>
                <div class="flex items-center gap-3 pt-2">
                  <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200"></div>
                  <div class="space-y-2">
                    <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                    <div class="h-2.5 w-16 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
              </div>
            </article>

<article class="overflow-hidden rounded-2xl border border-slate-200">
              <div class="h-48 animate-pulse bg-slate-100 sm:h-56"></div>
              <div class="space-y-4 p-5">
                <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
                <div class="h-5 w-11/12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-4 w-full animate-pulse rounded bg-slate-100"></div>
                <div class="h-4 w-3/4 animate-pulse rounded bg-slate-100"></div>
                <div class="flex items-center gap-3 pt-2">
                  <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200"></div>
                  <div class="space-y-2">
                    <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                    <div class="h-2.5 w-16 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
              </div>
            </article>

<article class="overflow-hidden rounded-2xl border border-slate-200">
              <div class="h-48 animate-pulse bg-slate-200 sm:h-56"></div>
              <div class="space-y-4 p-5">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
                <div class="h-5 w-10/12 animate-pulse rounded bg-slate-200"></div>
                <div class="h-4 w-full animate-pulse rounded bg-slate-100"></div>
                <div class="h-4 w-2/3 animate-pulse rounded bg-slate-100"></div>
                <div class="flex items-center gap-3 pt-2">
                  <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200"></div>
                  <div class="space-y-2">
                    <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                    <div class="h-2.5 w-16 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
              </div>
            </article>
          </div>

<aside class="space-y-6">
            <div class="rounded-2xl border border-slate-200 p-5">
              <div class="mb-5 h-5 w-32 animate-pulse rounded bg-slate-200"></div>
              <div class="space-y-5">
                <div class="flex gap-3">
                  <div class="h-16 w-16 shrink-0 animate-pulse rounded-xl bg-slate-200"></div>
                  <div class="flex-1 space-y-3 py-1">
                    <div class="h-3 w-full animate-pulse rounded bg-slate-200"></div>
                    <div class="h-3 w-4/5 animate-pulse rounded bg-slate-100"></div>
                    <div class="h-2.5 w-1/2 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
                <div class="flex gap-3">
                  <div class="h-16 w-16 shrink-0 animate-pulse rounded-xl bg-slate-100"></div>
                  <div class="flex-1 space-y-3 py-1">
                    <div class="h-3 w-full animate-pulse rounded bg-slate-200"></div>
                    <div class="h-3 w-3/4 animate-pulse rounded bg-slate-100"></div>
                    <div class="h-2.5 w-1/2 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
                <div class="flex gap-3">
                  <div class="h-16 w-16 shrink-0 animate-pulse rounded-xl bg-slate-200"></div>
                  <div class="flex-1 space-y-3 py-1">
                    <div class="h-3 w-full animate-pulse rounded bg-slate-200"></div>
                    <div class="h-3 w-4/5 animate-pulse rounded bg-slate-100"></div>
                    <div class="h-2.5 w-1/2 animate-pulse rounded bg-slate-100"></div>
                  </div>
                </div>
              </div>
            </div>

<div class="rounded-2xl border border-slate-200 p-5">
              <div class="mb-5 h-5 w-28 animate-pulse rounded bg-slate-200"></div>
              <div class="flex flex-wrap gap-2">
                <div class="h-8 w-20 animate-pulse rounded-full bg-slate-100"></div>
                <div class="h-8 w-24 animate-pulse rounded-full bg-slate-200"></div>
                <div class="h-8 w-16 animate-pulse rounded-full bg-slate-100"></div>
                <div class="h-8 w-28 animate-pulse rounded-full bg-slate-100"></div>
                <div class="h-8 w-20 animate-pulse rounded-full bg-slate-200"></div>
              </div>
            </div>

<div class="rounded-2xl bg-slate-100 p-6">
              <div class="mb-4 h-6 w-40 animate-pulse rounded bg-slate-200"></div>
              <div class="mb-2 h-3 w-full animate-pulse rounded bg-slate-200"></div>
              <div class="mb-5 h-3 w-4/5 animate-pulse rounded bg-slate-200"></div>
              <div class="h-11 w-full animate-pulse rounded-xl bg-slate-300"></div>
            </div>
          </aside>
        </div>
      </div>
    </section>

<section class="mx-auto max-w-7xl px-5 py-16 lg:px-8">
      <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white p-8 sm:p-12">
        <div class="mx-auto max-w-2xl text-center">
          <div class="mx-auto mb-5 h-8 w-56 animate-pulse rounded bg-slate-200"></div>
          <div class="mx-auto mb-2 h-4 w-full max-w-lg animate-pulse rounded bg-slate-100"></div>
          <div class="mx-auto mb-8 h-4 w-3/4 animate-pulse rounded bg-slate-100"></div>
          <div class="mx-auto flex max-w-lg flex-col gap-3 sm:flex-row">
            <div class="h-12 flex-1 animate-pulse rounded-xl border border-slate-200 bg-slate-50"></div>
            <div class="h-12 w-full animate-pulse rounded-xl bg-slate-200 sm:w-32"></div>
          </div>
          <div class="mx-auto mt-4 h-3 w-48 animate-pulse rounded bg-slate-100"></div>
        </div>
      </div>
    </section>
  </main>

<footer class="border-t border-slate-200 bg-white">
    <div class="mx-auto max-w-7xl px-5 py-12 lg:px-8">
      <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-5">
        <div class="space-y-4 sm:col-span-2">
          <div class="flex items-center gap-3">
            <div class="h-10 w-10 animate-pulse rounded-xl bg-slate-200"></div>
            <div class="h-4 w-28 animate-pulse rounded bg-slate-200"></div>
          </div>
          <div class="h-3 w-full max-w-xs animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-4/5 max-w-xs animate-pulse rounded bg-slate-100"></div>
          <div class="flex gap-3 pt-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-slate-100"></div>
            <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
        </div>

<div class="space-y-4">
          <div class="h-4 w-24 animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
        </div>

<div class="space-y-4">
          <div class="h-4 w-24 animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
        </div>

<div class="space-y-4">
          <div class="h-4 w-24 animate-pulse rounded bg-slate-200"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
        </div>
      </div>

<div class="mt-10 flex flex-col gap-4 border-t border-slate-200 pt-6 sm:flex-row sm:items-center sm:justify-between">
        <div class="h-3 w-56 max-w-full animate-pulse rounded bg-slate-100"></div>
        <div class="flex gap-5">
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
          <div class="h-3 w-16 animate-pulse rounded bg-slate-100"></div>
        </div>
      </div>
    </div>
  </footer>
</div>

Related Examples

Blog items skeleton

Nii Anyetei

2 years ago

3.4k
Skeleton loading card horizontal

Ahmed Malik

3 years ago

14.7k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Raul antonio de la cruz hernandez

1 year ago

1.3k
Skeleton loader for article card

OmKar Mehta

2 years ago

4k
Profile card skeleton loading

Kris Showen

3 years ago

12.9k
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Anonymous

1 year ago

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

JUGENDRA GANGWAR

16 hours ago

2
Skeleton loader for card sample
This tailwind example is contributed by Bishnu Thapa, on 15-Apr-2024. Component is made with Tailwind CSS v3.4. It's responsive.

Bishnu Thapa

2 years ago

2.5k
404 Not Found Page

Maxim

2 years ago

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

JUGENDRA GANGWAR

16 hours ago

4
Skeleton loading for blog post
full page skeleton loader

Ahmed Malik

3 years ago

11.9k
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.