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

Microblog article

View

Microblog list

View