iOS 14 Segmented Control with Vue and TailwindCSS - HTML Template

segmentcontrol.html

<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>