Masonry Layout With Macy

<h1 class="mt-6 mx-4 mb-6 text-xl">Example with Macy.js</h1>

<div id="macy-container" class="mt-12 py-2 sm:py-4 mx-auto">

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="group" href="#">

        <img class="lazyload object-cover w-full mx-auto" src="https://source.unsplash.com/random/300x200" alt="Random Image">

        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Volunteer
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Palliative Support Volunteer</h3>
            <p class="text-white opacity-75">Stettler Hospice Society is recruiting volunteers to provide palliative
                support.</p>
        </div>
    </a>

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="group" href="#">
        <img class="lazyload object-cover w-full mx-auto" src="https://source.unsplash.com/random/300x200" alt="Random Image">

        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Volunteer
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Palliative Support Volunteer</h3>
            <p class="text-white opacity-75">Stettler Hospice Society is recruiting volunteers to provide palliative
                support.</p>
        </div>
    </a>

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Volunteer
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Palliative Support Volunteer</h3>
            <p class="text-white opacity-75">Stettler Hospice Society is recruiting volunteers to provide palliative
                support.</p>
        </div>
    </a>

    <a class="group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" integrity="sha512-JrL1wXR0TeToerkl6TPDUa9132S3PB1UeNpZRHmCe6TxS43PFJUcEYUhjJb/i63rSd+uRvpzlcGOtvC/rDQcDg==" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>

<script>
    if (document.getElementById('macy-container')) {
        var macy = Macy({
            container: '#macy-container',
            trueOrder: false,
            waitForImages: false,
            margin: 24,
            columns: 3,
            breakAt: {
                1280: 3,
                1024: 2,
                768: 2,
                640: 1,
            }
        });
        // macyInstance.runOnImageLoad(function() {
        //   macyInstance.recalculate(true);
        // }, true);
    }
</script>