{% 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-4 flex flex-wrap items-baseline">
      <h1 class="ml-8 mt-2 mb-2 sm:mb-0 text-lg font-medium text-gray-900">
        {{ title }}
        <span class="inline-block h-1 text-sm text-gray-500">
          in <a href="/{{tags[0]}}" class="text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link">{{ tags[0] | capitalize }}</a>
        </span>
      </h1>
    </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" %}

