vac.dev-experimental-old/_includes/footer.html

<footer class="footer bg-black flex justify-center">
  <div
    class="
      container
      max-w-screen-xl
      flex
      sl:justify-between
      lm:justify-start
      p-5
      pb-10
      md:px-12 md:pt-5
      lg:pt-10
    "
  >
    <div class="logo mr-10 lg:mr-20">
      <a href="{{site.url}}{{ site.baseurl }}"
        ><img
          src="{{ '/assets/img/logo.png' | relative_url }}"
          alt="Vac logo"
          class="w-9 h-11"
      /></a>
    </div>
    <p
      class="
        hidden
        ml:inline-block
        w-52
        text-base text-white
        opacity-75
        lm:mr-32
      "
    >
      VAC researches peer-to-peer, private, censorship resistant communication
    </p>

    <div class="flex flex-col sm:flex-row xm:justify-between">
      <nav class="flex max-w-xs mr-0 xm:mr-5 l:mr-32 mb-5 sm:mb-0">
        <div class="flex flex-col xxs:flex-row">
          <div class="flex flex-col mr-5 sl:mr-14">
            <p class="text-base text-white mb-5 lg:mb-4">Research</p>
            <ul class="">
              {% for nav in site.data.footer-research %} {% include
              nav-item.html %} {% endfor %}
            </ul>
          </div>
          <div class="flex flex-col sl:mr-14">
            <p class="text-base text-white mb-5 lg:mb-4 mr-5">Socials</p>
            <ul class="">
              {% for nav in site.data.footer-socials %} {% include nav-item.html
              %} {% endfor %}
            </ul>
          </div>
        </div>
        <div>
          <div class="flex flex-col sl:mr-5">
            <p class="text-base text-white mb-5 lg:mb-4">Projects</p>
            <ul class="">
              {% for nav in site.data.footer-projects %} {% include
              nav-item.html %} {% endfor %}
            </ul>
          </div>
        </div>
      </nav>

      <div class="flex flex-col w-52">
        <h3 class="text-base text-white mb-5">Signup for updates</h3>
        <form action="" class="footer__form">
          <div class="flex items-center w-full">
            <input
              class="
                text-xs text-white
                w-full
                bg-black
                border-b border-white
                mr-2
                focus:outline-none
                placeholder-white placeholder-opacity-50
              "
              type="email"
              placeholder="your email"
              required
            />
            <button
              class="
                h-10
                w-10
                bg-arrowWhite bg-auto bg-no-repeat bg-left
                focus:outline-none
                hover:opacity-50
              "
              type="submit"
            ></button>
          </div>
        </form>
        <p
          class="footer__confirm text-base italic text-white opacity-75 hidden"
        >
          You signed up! Check your e-mail
        </p>
      </div>
    </div>
  </div>
</footer>