Developer-Friendly Tailwind Blog Components

Article Text Place Holder

<div role="status" class="max-w-lg animate-pulse space-y-2.5">
  <div class="flex w-full items-center">
    <div class="h-2.5 w-32 rounded-full bg-gray-200"></div>
    <div class="ms-2 h-2.5 w-24 rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-300"></div>
  </div>
  <div class="flex w-full max-w-[480px] items-center">
    <div class="h-2.5 w-full rounded-full bg-gray-200"></div>
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-24 rounded-full bg-gray-300"></div>
  </div>
  <div class="flex w-full max-w-[400px] items-center">
    <div class="h-2.5 w-full rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-80 rounded-full bg-gray-200"></div>
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-300"></div>
  </div>
  <div class="flex w-full max-w-[480px] items-center">
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-200"></div>
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-24 rounded-full bg-gray-300"></div>
  </div>
  <div class="flex w-full max-w-[440px] items-center">
    <div class="ms-2 h-2.5 w-32 rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-24 rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-200"></div>
  </div>
  <div class="flex w-full max-w-[360px] items-center">
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-300"></div>
    <div class="ms-2 h-2.5 w-80 rounded-full bg-gray-200"></div>
    <div class="ms-2 h-2.5 w-full rounded-full bg-gray-300"></div>
  </div>
  <span class="sr-only">Loading...</span>
</div>

<js-component src="blog/article_text_place_holder"></js-component>

Article List Place Holder

View

<div role="status" class="max-w-md animate-pulse space-y-4 divide-y divide-gray-200 rounded border border-gray-200 p-4 shadow md:p-6">
  <div class="flex items-center justify-between">
    <div>
      <div class="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300"></div>
      <div class="h-2 w-32 rounded-full bg-gray-200"></div>
    </div>
    <div class="h-2.5 w-12 rounded-full bg-gray-300"></div>
  </div>
  <div class="flex items-center justify-between pt-4">
    <div>
      <div class="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300"></div>
      <div class="h-2 w-32 rounded-full bg-gray-200"></div>
    </div>
    <div class="h-2.5 w-12 rounded-full bg-gray-300"></div>
  </div>
  <div class="flex items-center justify-between pt-4">
    <div>
      <div class="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300"></div>
      <div class="h-2 w-32 rounded-full bg-gray-200"></div>
    </div>
    <div class="h-2.5 w-12 rounded-full bg-gray-300"></div>
  </div>
  <div class="flex items-center justify-between pt-4">
    <div>
      <div class="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300"></div>
      <div class="h-2 w-32 rounded-full bg-gray-200"></div>
    </div>
    <div class="h-2.5 w-12 rounded-full bg-gray-300"></div>
  </div>
  <div class="flex items-center justify-between pt-4">
    <div>
      <div class="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300"></div>
      <div class="h-2 w-32 rounded-full bg-gray-200"></div>
    </div>
    <div class="h-2.5 w-12 rounded-full bg-gray-300"></div>
  </div>
  <span class="sr-only">Loading...</span>
</div>

<js-component src="blog/article_article_list_placeholder"></js-component>

Article Video Place Holder

View

<js-component src="blog/article_video_placeholder"></js-component>

Article Default Skeleton

View

<js-component src="blog/article_default_skeleton"></js-component>

Article Card Place Holder

View

<div role="status" class="max-w-sm animate-pulse rounded border border-gray-200 p-4 shadow md:p-6">
  <div class="mb-4 flex h-48 items-center justify-center rounded bg-gray-300">
    <svg class="h-10 w-10 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
      <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
      <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
    </svg>
  </div>
  <div class="mb-4 h-2.5 w-48 rounded-full bg-gray-200"></div>
  <div class="mb-2.5 h-2 rounded-full bg-gray-200"></div>
  <div class="mb-2.5 h-2 rounded-full bg-gray-200"></div>
  <div class="h-2 rounded-full bg-gray-200"></div>
  <div class="mt-4 flex items-center">
    <svg class="me-3 h-10 w-10 text-gray-200 dark:text-gray-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
      <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
    </svg>
    <div>
      <div class="mb-2 h-2.5 w-32 rounded-full bg-gray-200"></div>
      <div class="h-2 w-48 rounded-full bg-gray-200"></div>
    </div>
  </div>
  <span class="sr-only">Loading...</span>
</div>

<js-component src="blog/article_card_placeholder"></js-component>

Image placeholder

View

<div role="status" class="animate-pulse space-y-8 md:flex md:items-center md:space-x-8 md:space-y-0 rtl:space-x-reverse">
  <div class="flex h-48 w-full items-center justify-center rounded bg-gray-300 sm:w-96">
    <svg class="h-10 w-10 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
    </svg>
  </div>
  <div class="w-full">
    <div class="mb-4 h-2.5 w-48 rounded-full bg-gray-200"></div>
    <div class="mb-2.5 h-2 max-w-[480px] rounded-full bg-gray-200"></div>
    <div class="mb-2.5 h-2 rounded-full bg-gray-200"></div>
    <div class="mb-2.5 h-2 max-w-[440px] rounded-full bg-gray-200"></div>
    <div class="mb-2.5 h-2 max-w-[460px] rounded-full bg-gray-200"></div>
    <div class="h-2 max-w-[360px] rounded-full bg-gray-200"></div>
  </div>
  <span class="sr-only">Loading...</span>
</div>

<js-component src="blog/article_placeholder"></js-component>

Single Article View

View

<div class="max-w-2xl mx-auto p-6">
    <article>
        <header class="mb-4">
            <h1 class="text-3xl font-bold">Article Title</h1>
            <div class="text-sm text-gray-500 flex items-center space-x-4 mt-2">
                <span>By <span class="font-semibold">Author Name</span></span>
                <span>&bullet;</span>
                <time datetime="2023-10-05">October 5, 2023</time>
            </div>
        </header>
        <figure class="mb-6">
            <img src="https://placehold.co/600x400" alt="Article Image" class="w-full h-auto">
            <figcaption class="text-gray-500 text-sm mt-2">Image caption or description goes here.</figcaption>
        </figure>
        <div class="text-base text-black">
            <p>This is the content of the article. It goes into detail on the subject matter, providing valuable information and insights.</p>
            <p>The article continues, enriching the reader’s understanding and curiosity on the topic it covers.</p>
        </div>
        <div class="border-t mt-8 pt-4 flex items-center space-x-2">
            <span class="font-bold text-gray-600">Share:</span>
            <button class="text-blue-500 hover:text-blue-700">Twitter</button>
            <button class="text-blue-500 hover:text-blue-700">Facebook</button>
            <button class="text-blue-500 hover:text-blue-700">LinkedIn</button>
        </div>
    </article>
</div>

<js-component src="blog/single_article_view"></js-component>

Featured Article

View

<js-component src="blog/featured_article"></js-component>

Gallery Format

View

<div class="container mx-auto p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    <div class="border border-neutral-300 bg-white">
        <img src="https://placehold.co/600x400" alt="Article Image" class="w-full">
        <div class="p-4">
            <h2 class="font-bold text-lg">Article Title 1</h2>
            <p class="text-black mt-2">A brief description of the article content displayed here, enticing the user to click through and read more.</p>
        </div>
    </div>
    <div class="border border-neutral-300 bg-white">
        <img src="https://placehold.co/600x400" alt="Article Image" class="w-full">
        <div class="p-4">
            <h2 class="font-bold text-lg">Article Title 2</h2>
            <p class="text-black mt-2">A brief description of the article content displayed here, enticing the user to click through and read more.</p>
        </div>
    </div>
    <div class="border border-neutral-300 bg-white">
        <img src="https://placehold.co/600x400" alt="Article Image" class="w-full">
        <div class="p-4">
            <h2 class="font-bold text-lg">Article Title 3</h2>
            <p class="text-black mt-2">A brief description of the article content displayed here, enticing the user to click through and read more.</p>
        </div>
    </div>
</div>

<js-component src="blog/gallery_format"></js-component>

Article Card

View

<js-component src="blog/article_card"></js-component>

Article List

View

<section class="p-4">
    <div class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-semibold mb-4">Latest Articles</h2>
        <div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="border rounded-lg p-4">
                <img src="https://placehold.co/400x200" alt="Article Image" class="w-full h-auto mb-2">
                <h3 class="text-lg font-bold">Article Title 1</h3>
                <p class="text-sm text-gray-700">A brief summary of the first article goes here.</p>
                <p class="text-xs text-gray-500 mt-1">Published on: 2023-01-01</p>
            </div>
            <div class="border rounded-lg p-4">
                <img src="https://placehold.co/400x200" alt="Article Image" class="w-full h-auto mb-2">
                <h3 class="text-lg font-bold">Article Title 2</h3>
                <p class="text-sm text-gray-700">A brief summary of the second article goes here.</p>
                <p class="text-xs text-gray-500 mt-1">Published on: 2023-01-02</p>
            </div>
            <div class="border rounded-lg p-4">
                <img src="https://placehold.co/400x200" alt="Article Image" class="w-full h-auto mb-2">
                <h3 class="text-lg font-bold">Article Title 3</h3>
                <p class="text-sm text-gray-700">A brief summary of the third article goes here.</p>
                <p class="text-xs text-gray-500 mt-1">Published on: 2023-01-03</p>
            </div>
            
        </div>
    </div>
</section>

<js-component src="blog/article_list"></js-component>