Home
Ahmed Malik
Skeleton loading for blog post

Skeleton loading for blog post

full page skeleton loader

This tailwind example is contributed by Ahmed Malik, on 12-Jun-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Content loader, Shimmer, Ghost element, Content placeholder

Skeleton loader

Author Ahmed Malik

8.9k

10

Fork Fullscreen

<div class="min-h-screen bg-white">
  <header class="bg-gray-300 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <div class="animate-pulse flex items-center space-x-4">
        <div class="h-12 w-12 bg-gray-400 rounded-full"></div>
        <div>
          <div class="h-4 w-20 bg-gray-400 rounded"></div>
          <div class="h-4 w-16 bg-gray-400 rounded mt-2"></div>
        </div>
      </div>
    </div>
  </header>
  <div class="max-w-4xl mx-auto px-4 py-8">
    <div class="animate-pulse space-y-4">
      <div class="h-4 bg-gray-300 rounded w-2/3"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded w-1/2"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded w-3/4"></div>
    </div>

<div class="animate-pulse space-y-4 mt-12">
      <div class="h-4 bg-gray-300 rounded w-2/3"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded w-1/2"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
      <div class="h-4 bg-gray-300 rounded"></div>
    </div>
  </div>
</div>

Related Examples

Card placeholder
Skeleton Loader for card. This Tailwind component simulates a loading state for content cards. It includes a circular placeholder for an image or avatar and placeholder text for titles and descriptions.

Author:
Alok

1 year ago

8.5k
Skeleton loading card horizontal

Author:
Ahmed Malik

1 year ago

11.2k
Skeleton loader for card

Author:
Lukas Müller

1 year ago

9.5k
Profile card skeleton loading

Author:
Kris Showen

1 year ago

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

Author:
Anja Müller

9 months ago

6.2k
Skeleton loader for article card

Author:
OmKar Mehta

2 months ago

650
Skeleton loader for profile card

Author:
Lukas Müller

1 year ago

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

Author:
Bishnu Thapa

2 months ago

252
image gallery
image gallery [lightbox]

Author:
Prasertsak ฟาร์มวันหยุด

1 month ago

334
Notification Alert Section
Notification card with close button

Author:
Prashant

1 year ago

9.8k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

1 year ago

9.8k
Section Divider
Inspired from https://tailwindflex.com/prajwal/divider-section

Author:
Prashant

1 year ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.6