Image Selection

<!-- https://scrimba.com/p/pdqbBcM/cJpnNpUB -->

<div class="container mx-auto px-4 mt-4" x-data="{ image: 'image1' }">
  <div>
    <img src="http://via.placeholder.com/300x200/a0aec0/cbd5e0&text=img1" alt="mac pro"
         x-show="image =='image1'">
    <img src="http://via.placeholder.com/300x200/a0aec0/cbd5e0&text=img2" alt="mac pro"
         x-show="image =='image2'">
    <img src="http://via.placeholder.com/300x200/a0aec0/cbd5e0&text=img3" alt="mac pro"
         x-show="image =='image3'">
  </div>
  <div class="flex items-center mt-4">
    <a href="#" class="border border-transparent hover:border-blue-500"
       @click.prevent="image = 'image1'"
       :class="{'border-blue-500': image === 'image1'}"
    ><img src="http://via.placeholder.com/300x200/a0aec0/cbd5e0&text=img1" alt="mac pro" class="w-12"></a>
    <a href="#" class="border border-transparent hover:border-blue-500 ml-2"
       @click.prevent="image = 'image2'"
       :class="{'border-blue-500': image === 'image2'}"
    ><img src="http://via.placeholder.com/300x200/a0aec0/cbd5e0&text=img2" alt="mac pro" class="w-12"></a>
    <a href="#" class="border border-transparent hover:border-blue-500 ml-2"
       @click.prevent="image = 'image3'"
       :class="{'border-blue-500': image === 'image3'}"
    ><img src="http://via.placeholder.com/300x200/a0aec0/cbd5e0&text=img3" alt="mac pro" class="w-12"></a>
  </div>
</div>

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>