TA-Foodtrucks - The Basic HTML structure

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
    data-locale="de-DE"
    data-min-height="10rem"
    data-duration="1000"
    data-today="Today"
    data-tomorrow="Tomorrow"
    data-seperator=" - "
    data-suffix=""
>
    <div
        class="ta-foodtrucks-loading bg-white text-gray-400 ta-foodtrucks-loading-out"
        :class="{'ta-foodtrucks-loading-out': initialized}"
        x-show="loading"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-24 w-24" viewBox="0 0 100 100"><path d="M27.136 52.495c1.377 12.625 12.734 21.747 25.359 20.37s21.747-12.735 20.37-25.36m-3.878.423c1.14 10.438-6.378 19.91-16.915 21.06s-19.92-6.478-21.06-16.916"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" rom="0 50 50" to="360 50 50" repeatCount="indefinite" ></animateTransform></path></svg>
    </div>
    <div class="ta-foodtrucks-error" x-show="!has_dates || error">
        Sorry, no dates available at the moment...
    </div>
    <template x-for="(item, index) in dates" :key="item.id" x-if="has_dates">
        <div
            class="flex flex-col sm:flex-row items-center justify-between border-b-2 border-dashed border-gray-100 last:border-b-0 py-8 px-4"
        >
            <div
                class="ta-foodtrucks-logo rounded-full w-24 h-24 border border-gray-200 shadow-md sm:mr-8"
            >
                <img :src="item.logo.url.local" alt="asdas" class="ta-foodtrucks-logo-image" />
            </div>
            <div class="ta-foodtrucks-details leading-tight">
                <div class="text-base text-secondary-600 font-bold">
                    <span x-text="getWeekday(index, true)"></span>,
                    <span x-text="getDay(index)"></span>
                </div>
                <div class="text-4xl sm:text-5xl font-light mb-2">
                    <span x-text="getTime(index, ' - ', 'o\'clock')"></span>
                </div>
                <div class="text-base font-semibold">
                    <span x-text="item.name"></span>
                    : <span x-text="item.location.address.street"></span>
                    <span x-text="item.location.address.number"></span>,
                    <span x-text="item.location.address.city"></span>
                </div>
                <div class="text-sm font-regular mb-2">
                    <span class="font-normal" x-text="item.vendor.name.long"></span>:
                    <span x-text="item.vendor.offer"></span>
                </div>
                <div class="w-full flex flex-wrap justify-between font-normal text-sm">
                    <div class="flex flex-wrap items-center my-2">
                        <a
                            :href="getWhat3WordsLink(index)"
                            class="inline-flex text-sm text-primary font-bold items-center"
                            target="_blank"
                        >
                            <svg class="fill-current h-4" viewBox="0 0 576 512"><path d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z" ></path></svg>
                            <span class="ml-1">What3Words</span>
                        </a>
                        <span class="ml-2">
                            (<span x-text="item.location.position.what3words"></span>)
                        </span>
                    </div>
                    <a
                        :href="getGoogleMapsLink(index)"
                        class="inline-flex text-sm text-primary font-bold items-center my-2"
                        target="_blank"
                    >
                        <svg class="fill-current h-4" viewBox="0 0 384 512">
                            <path
                                d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
                            ></path>
                        </svg>
                        <span class="ml-1"> Google Maps </span>
                    </a>
                </div>
            </div>
        </div>
    </template>
</div>