TA-Pagination - The Basic HTML structure

<div
    class="ta-pagination ta-pagination-anim-swing mt-6 mb-12 grid"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
    data-page="1"
    data-pagination="1"
    data-duration="200"
    data-unify="true"
    data-border="true"
    data-autoplay="false"
    data-interval="5000"
    data-breakpoints="[{ "width": "640", "pagination": "2", "unify": "true" }]"
>
    <div
        class="grid gap-24 grid-cols-1 sm:grid-cols-2 overflow-hidden py-8 px-12 min-h-72 border border-gray-50 rounded-lg shadow-lg mb-12"
        x-ref="content">
        <div class="ta-pagination-item flex flex-col items-center">
            <div class="relative w-full h-28 flex-shrink-0 rounded-lg overflow-hidden">
                <img src="/ta-pagination/pagination-01_hu8cd0f7aea7a615d4189b775f66839112_609500_480x180_fill_q20_box_smart1.jpg" alt="" class="absolute inset-0 h-full w-full object-cover object-center" title="Image Title">
            </div>
            <div class="leading-snug flex-grow text-center mt-4">
                <a href="#" class="text-primary">
                    <h2 class="text-xl font-bold mb-2">
                        Juansi Waterfall
                    </h2>
                </a>
                <p class="text-sm font-normal">
                    Juansi Waterfall is a 3.7 kilometer out and back trail located near Jinshan, New Taipei City, Taiwan that features a waterfall and is rated as moderate. The trail is primarily used for hiking, walking, and nature trips.
                </p>
            </div>
        </div>
        <!--- ADD MORE CONTENT HERE /-->
    </div>
    <div class="absolute left-0 inset-y-0 flex items-center justify-center -ml-4 xl:-ml-6">
        <button
            type="button"
            class="text-primary bg-white flex-center rounded-full border-2 border-primary shadow-lg p-1 focus:ring-4 focus:ring-primary focus:ring-offset-0"
            :class="{'opacity-25 cursor-default': animating}"
            x-on:click.prevent="previous()"
            title="Go to previous page"
        >
            <span class="sr-only">Go to previous page</span>
            <!--- ICON /-->
        </button>
    </div>
    <div class="absolute right-0 inset-y-0 flex items-center justify-center -mr-4 xl:-mr-6">
        <button
            type="button"
            class="text-primary bg-white flex-center rounded-full border-2 border-primary shadow-lg p-1 focus:ring-4 focus:ring-primary focus:ring-offset-0"
            :class="{'opacity-25 cursor-default': animating}"
            x-on:click.prevent="next()"
            title="Next page"
        >
            <span class="sr-only">Next page</span>
            <!--- ICON /-->
        </button>
    </div>
</div>