station-facilities.html

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/petite-vue" defer init></script>

<div class="p-10">
  <div class="max-w-4xl mx-auto p-4 bg-gray-100" v-scope="{
    facilities: [
      { name: 'Toilets', available: false },
      { name: 'Parking', available: true },
      { name: 'ATM', available: false },
      { name: 'Ticket office', available: false },
      { name: 'Wifi', available: false },
      { name: 'Ticket machine', available: true },
      { name: 'Step-free access', available: true },
      { name: 'Shops', available: false },
    ],
  }">

    <dl class="flex flex-wrap">
      <div class="flex w-1/4" v-for="facility in facilities">
        <dt v-text="facility.name"></dt>

        <dd class="order-first mr-2">
          <span v-if="facility.available">
            <span class="sr-only">Yes</span>
            <svg aria-role="none presentation" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
          </span>
          <span v-if="!facility.available">
            <span class="sr-only">No</span>
            <svg aria-role="none presentation" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </span>
        </dd>
      </div>
    </dl>

  </div>
</div>