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

9.6k

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

2 years ago

9k
Skeleton loading card horizontal

Author:
Ahmed Malik

1 year ago

12.2k
Skeleton loader for card

Author:
Lukas Müller

1 year ago

10k
Profile card skeleton loading

Author:
Kris Showen

1 year ago

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

Author:
Anja Müller

1 year ago

6.6k
Skeleton loader for article card

Author:
OmKar Mehta

7 months ago

1.9k
Skeleton loader for profile card

Author:
Lukas Müller

1 year ago

7.5k
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

7 months ago

1.1k
Blog items skeleton

Author:
Nii Anyetei

3 months ago

732
404 Not Found Page

Author:
Maxim

2 months ago

171
Glowing gradient button
Button on black background

Author:
Leon Bachmann

1 year ago

29k
Onboarding steps section

Author:
Prashant

11 months ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8