Banner

            <div
    class="py-16 bg-black bg-center bg-cover bg-no-repeat md:py-20"
    style="background-image: url('https://images.unsplash.com/photo-1544531586-fde5298cdd40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=400&q=60')"
>
    <div class="container">
        <div class="max-w-2xl px-6 py-12 text-white bg-black bg-opacity-80 lg:px-12 lg:py-16">
            <h3 class="text-sm">Pre title</h2>
            <h2 class="mt-1 text-2xl sm:text-3xl md:text-4xl lg:text-5xl">Events</h2>
            <p class="mt-4 max-w-lg">City and Community Engagement and its partners regularly host events that are open to the public. Search this calendar to learn about our upcoming events.  </p>
        </div>
    </div>
</div>

        

            <div
    class="py-16 bg-black bg-center bg-cover bg-no-repeat md:py-20"
    style="background-image:
        linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),
        url('https://images.unsplash.com/photo-1544531586-fde5298cdd40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=400&q=60')
    "
>
    <div class="container">
        <div class="max-w-2xl text-white">
            <h3 class="text-sm">Pre title</h2>
            <h2 class="mt-1 text-2xl sm:text-3xl md:text-4xl lg:text-5xl">Events</h2>
            <p class="mt-4 max-w-lg">City and Community Engagement and its partners regularly host events that are open to the public. Search this calendar to learn about our upcoming events.  </p>
        </div>
    </div>
</div>

        

            <div
    class="pt-48 bg-black bg-center bg-cover bg-no-repeat md:pt-64"
    style="background-image: url('https://images.unsplash.com/photo-1544531586-fde5298cdd40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=400&q=60')"
>
    <div class="container py-6 text-white bg-black bg-opacity-80">
        <h2 class="text-2xl leading-tight sm:text-3xl md:text-4xl lg:text-5xl">Collection Title</h2>
    </div>
</div>