htmx-playground/templates/tuts.html

{% extends "base.html" %} {% block title %}Micro Tuts{% endblock %} {% block
content %}
<nav>
    <small>
        <a href="/"><~ back</a>
    </small>
</nav>

<h1>Micro Tuts</h1>
<p>Here all my Micro Tuts</p>
<div class="list-none gap-1 flex flex-col">
    {% for tut in tuts_list %}
    <a href="tuts/{{tut}}" class="hover:no-underline" >
      <div class="no-underline border-0 py-4 px-3 flex flex-row gap-3 border-b border-white border-dashed border-opacity-20 hover:bg-white hover:bg-opacity-10  hover:rounded-xl">
        <img src="https://thispersondoesnotexist.com" width="100" height="100"/>
        <div>
          <h2 class="">{{tut}}</h3>
          <p class="text-white text-opacity-60">Some short description of the tut</p>
        </div>
      </div>
    </a>
    {% endfor %}
</div>
{% endblock content%}