<!-- prettier-ignore -->
{% extends "base.html" %}

{% block content %}
<div class="grid grid-cols-3 gap-4 mt-4 mx-4">
  <div class="cols-span-1 bg-stone-200 pt-12 hover:bg-stone-300">
    <a href="#"></a>
    <h1 class="font-extrabold text-center text-2xl">Title</h1>
    <p class="text-center ml-4">post desc</p>
    <p class="text-right pt-12 pb-4 mr-12 font-bold">post date</p>
    </a>
  </div>
  <div class="cols-span-1 bg-stone-200 pt-12 hover:bg-stone-300">
    <a href="#">
      <h1 class="font-extrabold text-center text-2xl">Title</h1>
      <p class="text-center ml-4">post desc</p>
      <p class="text-right pt-12 pb-4 mr-12 font-bold">post date</p>
    </a>
  </div>
  <div class="cols-span-1 bg-stone-200 pt-12 hover:bg-stone-300">
    <a href="#">
      <h1 class="font-extrabold text-center text-2xl">Title</h1>
      <p class="text-center ml-4">post desc</p>
      <p class="text-right pt-12 pb-4 mr-12 font-bold">post date</p>
    </a>
  </div>
  <div class="cols-span-1 bg-stone-200 pt-12 hover:bg-stone-300">
    <a href="#">
      <h1 class="font-extrabold text-center text-2xl">Title</h1>
      <p class="text-center ml-4">post desc</p>
      <p class="text-right pt-12 pb-4 mr-12 font-bold">post date</p>
    </a>
  </div>
  <div class="cols-span-1 bg-stone-200 pt-12 hover:bg-stone-300">
    <a href="#">
      <h1 class="font-extrabold text-center text-2xl">Title</h1>
      <p class="text-center ml-4">post desc</p>
      <p class="text-right pt-12 pb-4 mr-12 font-bold">post date</p>
    </a>
  </div>
  <div class="cols-span-1 bg-stone-200 pt-12 hover:bg-stone-300">
    <a href="#">
      <h1 class="font-extrabold text-center text-2xl">Title</h1>
      <p class="text-center ml-4">post desc</p>
      <p class="text-right pt-12 pb-4 mr-12 font-bold">post date</p>
    </a>
  </div>
</div>
{% endblock %}