Fractal demo

Footer 

<footer class="bg-gray-800 py-8">
    <div class="container">
        <div class="md:flex md:items-center md:justify-between lg:px-8">
            <div class="flex justify-center space-x-6 md:order-2">

                <a href="https://twitter.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Twitter" title="Twitter">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#twitter" />
                    </svg>

                </a>

                <a href="https://github.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="GitHub" title="GitHub">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#github" />
                    </svg>

                </a>

                <a href="https://discord.gg/vuRz4Yx" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Discord" title="Discord">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#discord" />
                    </svg>

                </a>

            </div>
            <div class="mt-8 md:mt-0 md:order-1">
                <p class="text-center text-base leading-6 text-gray-400">
                    &copy; 2020 · MIT License
                </p>
            </div>
        </div>
    </div>
</footer>
 
<footer class="bg-gray-800 py-8">
    <div class="container">
        <div class="md:flex md:items-center md:justify-between lg:px-8">
            <div class="flex justify-center space-x-6 md:order-2">
                {% for socialNetwork in socialNetworks %}
                    <a href="{{ socialNetwork.link }}" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="{{ socialNetwork.name }}" title="{{ socialNetwork.name }}">
                        {% render '@icon', { id: socialNetwork.icon, size: 'w-6 h-6', type: 'fill' }, true %}
                    </a>
                {% endfor %}
            </div>
            <div class="mt-8 md:mt-0 md:order-1">
                <p class="text-center text-base leading-6 text-gray-400">
                    &copy; 2020 · MIT License
                </p>
            </div>
        </div>
    </div>
</footer>
 
{
  "socialNetworks": [
    {
      "name": "Twitter",
      "icon": "twitter",
      "link": "https://twitter.com/frctl"
    },
    {
      "name": "GitHub",
      "icon": "github",
      "link": "https://github.com/frctl"
    },
    {
      "name": "Discord",
      "icon": "discord",
      "link": "https://discord.gg/vuRz4Yx"
    }
  ]
}

No notes defined.