Talke Component Library

Footer 

<div class="mask-footer bg-talke-light-blue pb-[16%] -mt-[calc(15.4%_+_50px)] -mb-px">
</div>

<div class="px-8 pb-12 bg-talke-light-blue">
    <div class="flex flex-col justify-between w-full mx-auto space-y-20 text-white max-w-content-max lg:space-y-0 lg:flex-row">
        <div>
            <ol class="space-y-6 text-sm font-talke-semibold">
                <li>
                    <a href="#">Demonstro aequus</a>
                </li>
                <li>
                    <a href="#">Aegre spectaculum</a>
                </li>
                <li>
                    <a href="#">Turbo arto</a>
                </li>
                <li>
                    <a href="#">Eveniet antea</a>
                </li>
            </ol>
        </div>
        <div class="flex flex-col">
            <div class="min-w-full w-min">
                <div class="mb-3 text-2xl uppercase font-talke-regular">
                    Follow us
                </div>
                <div class="mb-8 text-lg break-words font-talke-regular">
                    Laudantium trado aduro tersus ad curto una:
                </div>
            </div>
            <div class="flex space-x-4">
                <a href="#" target="_blank">
                    <img src="/images/icons/instagram.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/facebook.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/linkedin.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/xing.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/youtube.svg" alt="" />
                </a>
            </div>
        </div>
    </div>
</div>
<div class="px-8 py-5 bg-talke-blue text-talke-light-blue">
    <div class="w-full mx-auto text-xs max-w-content-max font-talke-semibold">
        &copy; ALFRED TALKE GmbH & Co.
    </div>
</div>
 
<div class="mask-footer bg-talke-light-blue pb-[16%] -mt-[calc(15.4%_+_50px)] -mb-px">
</div>

<div class="px-8 pb-12 bg-talke-light-blue">
  <div class="flex flex-col justify-between w-full mx-auto space-y-20 text-white max-w-content-max lg:space-y-0 lg:flex-row">
    <div>
      <ol class="space-y-6 text-sm font-talke-semibold">
        {{#each items}}
        <li>
          <a href="#">{{this.itemText}}</a>
        </li>
        {{/each}}
      </ol>
    </div>
    <div class="flex flex-col">
      <div class="min-w-full w-min">
        <div class="mb-3 text-2xl uppercase font-talke-regular">
          {{followUsHeadline}}
        </div>
        <div class="mb-8 text-lg break-words font-talke-regular">
          {{followUsText}}
        </div>
      </div>
      <div class="flex space-x-4">
        <a href="#"
          target="_blank">
          <img src="/images/icons/instagram.svg"
            alt="" />
        </a>
        <a href="#"
          target="_blank">
          <img src="/images/icons/facebook.svg"
            alt="" />
        </a>
        <a href="#"
          target="_blank">
          <img src="/images/icons/linkedin.svg"
            alt="" />
        </a>
        <a href="#"
          target="_blank">
          <img src="/images/icons/xing.svg"
            alt="" />
        </a>
        <a href="#"
          target="_blank">
          <img src="/images/icons/youtube.svg"
            alt="" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="px-8 py-5 bg-talke-blue text-talke-light-blue">
  <div class="w-full mx-auto text-xs max-w-content-max font-talke-semibold">
    {{{copyright}}}
  </div>
</div>
 
{
  "items": [
    {
      "itemText": "Demonstro aequus"
    },
    {
      "itemText": "Aegre spectaculum"
    },
    {
      "itemText": "Turbo arto"
    },
    {
      "itemText": "Eveniet antea"
    }
  ],
  "copyright": "&copy; ALFRED TALKE GmbH & Co.",
  "followUsHeadline": "Follow us",
  "followUsText": "Laudantium trado aduro tersus ad curto una:"
}

No notes defined.