iOS 14 Segmented Control with Vue and TailwindCSS - Complete Template (3 Segments)

segmentcontrol.vue

<template>
  <div class="bg-gray-200 rounded-lg" style="padding: 2px;">
    <div class="relative flex items-center">

      <!-- tab dividers -->
      <div class="absolute w-full">
        <div class="w-1/3 flex justify-between m-auto">
          <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment3'}"></div>
          <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment1'}"></div>
        </div>
      </div>

      <!-- white sliding tab block -->
      <div class="absolute left-0 inset-y-0 w-1/3 flex bg-white transition-all ease-in-out duration-200 transform rounded-md shadow" :class="{'translate-x-0': selectedTab === 'segment1', 'translate-x-full': selectedTab === 'segment2', 'translate-x-fullx2': selectedTab === 'segment3'}"></div>

      <!-- clickable buttons -->
      <div class="relative flex-1 flex text-sm font-semibold capitalize items-center justify-center cursor-pointer m-px p-px" @click="selectedTab = 'segment1'">Segment 1</div>
      <div class="relative flex-1 flex text-sm font-semibold capitalize items-center justify-center cursor-pointer m-px p-px" @click="selectedTab = 'segment2'">Segment 2</div>
      <div class="relative flex-1 flex text-sm font-semibold capitalize items-center justify-center cursor-pointer m-px p-px" @click="selectedTab = 'segment3'">Segment 3</div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectedTab: 'segment1'
      }
    },
  }
</script>