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>

Blog with video content

View

<h1 class="mb-4 text-4xl font-bold text-gray-900">Article Title Goes Here</h1>

<div class="mb-6 flex justify-between text-gray-600" x-data="{ today: new Date().toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }">
    <p x-text="today">November 11, 2024</p>
  </div>

<div class="mb-6 flex justify-between text-gray-600">
    <div class="relative inset-0 flex w-full h-full">
      <video class="h-full w-full" controls>
        <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>

<div class="absolute inset-0 left-0 top-0 h-full">
        <div class="flex h-full flex-col items-center justify-center">
          <span class="font-serif text-6xl lg:text-9xl font-medium italic text-white opacity-80"> .Ocean </span>
          <h3 class="hidden md:block max-w-72 lg:max-w-96 lg:p-1 text-center text-sm text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis tempora recusandae nam voluptas temporibus qui.</h3>
        </div>
      </div>
    </div>
  </div>

<div class="prose prose-gray mb-8">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nisl nunc faucibus nisi, eget consequat metus nisi ut velit. Aenean feugiat, felis ut dictum placerat, ipsum nulla varius elit, et accumsan lacus libero nec urna.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
   </p>
  </div>
</div>

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

Sidebar

View

<div class="flex flex-col h-auto w-64 bg-gray-100 p-4 border-r border-gray-300">
    <button class="mb-4 text-black" @click="$store.sidebarOpen = !$store.sidebarOpen">Toggle Sidebar</button>
    <nav>
        <ul class="flex flex-col space-y-2">
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">Home</a></li>
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">About</a></li>
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">Services</a></li>
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">Contact</a></li>
        </ul>
    </nav>
    <div class="mt-6">
        <h2 class="text-black font-bold mb-2">Recent Posts</h2>
        <ul class="space-y-1">
            <li><a href="#" class="text-black hover:text-blue-500">Post one</a></li>
            <li><a href="#" class="text-black hover:text-blue-500">Post two</a></li>
            <li><a href="#" class="text-black hover:text-blue-500">Post three</a></li>
        </ul>
    </div>
    <div class="mt-6">
        <h2 class="text-black font-bold mb-2">Advertisements</h2>
        <img src="https://placehold.co/150x150" alt="Ad" class="w-full h-auto">
    </div>
</div>

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

Blog Article

View

<h1 class="text-4xl font-bold text-gray-900 mb-4">Article Title Goes Here</h1>
  
  
  <div class="flex justify-between text-gray-600 mb-6" x-data="{ today: new Date().toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }">
    <p x-text="today">November 11, 2024</p>
  </div>
  
  
  <div class="flex justify-between text-gray-600 mb-6">
    <img src="https://picsum.photos/id/212/600/300.jpg" />
  </div>
  
  
  <div class="prose prose-gray mb-8">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nisl nunc faucibus nisi, eget consequat metus nisi ut velit. Aenean feugiat, felis ut dictum placerat, ipsum nulla varius elit, et accumsan lacus libero nec urna.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
    <h2 class="text-2xl font-bold mt-6">Subheading</h2>
    <p>
      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    </p>
  </div>

</div>

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

Microblog article

View

<h1 class="text-4xl font-bold text-gray-900 mb-4">Article Title Goes Here</h1>
  
  
  <div class="flex justify-between text-gray-600 mb-6" x-data="{ today: new Date().toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }">
    <p x-text="today">November 11, 2024</p>
  </div>
  
  
  <div class="flex justify-between text-gray-600 mb-6">
    <img src="https://picsum.photos/id/212/600/300.jpg" />
  </div>
  
  
  <div class="prose prose-gray mb-8">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nisl nunc faucibus nisi, eget consequat metus nisi ut velit. Aenean feugiat, felis ut dictum placerat, ipsum nulla varius elit, et accumsan lacus libero nec urna.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
    <h2 class="text-2xl font-bold mt-6">Subheading</h2>
    <p>
      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    </p>
  </div>

</div>

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