Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment