Developer-Friendly Tailwind Blog Components

Blog with video content

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

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>

Microblog list

View

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