{% include "base-header.html" %}

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="max-w-3x1 mx-auto mb-4">
    <div class="-ml-2 mt-8 flex flex-wrap items-baseline">
      <h1 class="ml-8 mt-2 text-lg font-medium text-gray-900">
        {{ title }}
      </h1>
      <p class="ml-2 mt-1 text-sm text-gray-500 truncate">in {{ tags[0] | capitalize }}</p>
    </div>
    <div class="-ml-2">
      <p class="ml-8 text-sm text-gray-500">{{description}}</p>
    </div>
  </div>

  <div class="bg-white overflow-hidden shadow rounded-lg">
    <div class="p-4 sm:p-6">
      {{ content | safe }}
    </div>
  </div>
</main>

{% include "base-footer.html" %}