safing-web/_includes/project_card.html

<div class="card text-left transform scale-95">
    <div class="block cardshadow p-8 rounded-lg">
      <div class="tabs">
        <div class="tab">
          <input class="dropinput" type="checkbox" id="card-{{ include.state }}-{{ forloop.index }}">
          <label style="min-width: 90%; min-height: 150px; display: block;" class="absolute cursor-pointer" for="card-{{ include.state }}-{{ forloop.index }}">
            <img class="absolute right-0" style="margin-right: 1rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
          </label>
          <div>
            <div class="flex">
              {% for tag in card.projects %}
                {% assign tag_bg_strength = 100 %}
                {% if tag == 'Portmaster' %}
                  {% assign tag_color = 'blue' %}
                {% elsif tag == 'SPN' %}
                  {% assign tag_color = 'green' %}
                {% elsif tag == 'Website' %}
                  {% assign tag_color = 'pink' %}
                {% elsif tag == 'Backoffice' %}
                  {% assign tag_color = 'gray' %}
                  {% assign tag_bg_strength = 200 %}
                {% elsif tag == 'Community' %}
                  {% assign tag_color = 'purple' %}
                {% elsif tag == 'Marketing' %}
                  {% assign tag_color = 'orange' %}
                {% endif %}
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-{{ tag_color }}-{{ tag_bg_strength }} text-{{ tag_color }}-800 mr-2">
                  {{ tag }}
                </span>
              {% endfor %}
            </div>
            <div class="flex pt-6 items-center">
              <div>
                {% if include.state == 'done' %}
                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
                {% elsif include.state == 'in_progress' %}
                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt="">
                {% elsif include.state == 'discarded' %}
                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt="">
                {% elsif include.state == 'backlog' %}
                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt="">
                {% endif %}
              </div>
              <h1 class="pl-3 font-bold text-lg">{{ card.title }}</h1>
            </div>
          </div>
          <div style="padding-left: 0;" class="tab-content  opacity-50 text-md">
            <p>The Assignment:</p>
            <br/>
            {% for paragraph in card.description %}
              <p>{{ paragraph }}</p>
              {% unless forloop.last %}
                <br/>
              {% endunless %}
            {% endfor %}

            {% if card.link %}
              <br/>
              <a href="{{ card.link.url }}">
                {{ card.link.text }}
              </a>
            {% endif %}
          </div>
        </div>
        <div class="pt-3">
          <div class="absolute top-0 right-0 mr-6 pt-1 overflow-visible mt-20 sm:mt-16 sm:mr-16">
            <div class="flex-shrink-0 mt-0">
              <div class="flex ">
                {% for member in card.team %}
                  <span class="transform hover:scale-110 duration-150 ease-in-out" tooltip="{{ member | capitalize }}"  >
                    <img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="{{ site.img_url }}profiles/{{ member | downcase }}.png" alt="{{ member }}">
                  </span>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>