Fractal demo

Logos Grid 

<section class="section py-6 md:py-8 lg:py-10 xl:py-20 bg-gray-700">
    <div class="container">

        <div class="grid grid-cols-2 sm:grid-cols-4 gap-8">

            <div class="flex justify-center">
                <a href="https://clearleft.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                    <img class="h-8 lg:h-10 xl:h-12" src="/logos/clearleft.svg" alt="Clearleft"></a>
                </a>
            </div>

            <div class="flex justify-center">
                <a href="https://madebykind.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                    <img class="h-8 lg:h-10 xl:h-12" src="/logos/kind.svg" alt="Kind"></a>
                </a>
            </div>

            <div class="flex justify-center">
                <a href="https://www.liip.ch/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                    <img class="h-8 lg:h-10 xl:h-12" src="/logos/liip.svg" alt="Liip"></a>
                </a>
            </div>

            <div class="flex justify-center">
                <a href="https://slab.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                    <img class="h-8 lg:h-10 xl:h-12" src="/logos/slab.svg" alt="Slab"></a>
                </a>
            </div>

        </div>

    </div>
</section>
 
{% extends "@section-wrapper" %}

{% block content %}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-8">
        {% for logo in logos %}
            <div class="flex justify-center">
                <a href="{{ logo.link }}" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                    <img class="h-8 lg:h-10 xl:h-12" src="{{ logo.src }}" alt="{{ logo.alt }}"></a>
                </a>
            </div>
        {% endfor %}
    </div>
{% endblock %}
 
{
  "class": "bg-gray-700",
  "logos": [
    {
      "link": "https://clearleft.com/",
      "src": "/logos/clearleft.svg",
      "alt": "Clearleft"
    },
    {
      "link": "https://madebykind.com/",
      "src": "/logos/kind.svg",
      "alt": "Kind"
    },
    {
      "link": "https://www.liip.ch/",
      "src": "/logos/liip.svg",
      "alt": "Liip"
    },
    {
      "link": "https://slab.com/",
      "src": "/logos/slab.svg",
      "alt": "Slab"
    }
  ]
}

No notes defined.