<div id="app" class="h-screen flex flex-col bg-gray-100 antialiased">
  <!-- TOP BAR -->
  <div class="bg-white border-b border-gray-300 flex items-center px-6">
    <div class="flex-1 font-bold text-lg">Music App</div>
    <div class="pt-5 pb-4 border-b-4 border-white ml-6 cursor-pointer" :class="{'border-teal-500': selectedTab === 'Library', 'opacity-50': selectedTab !== 'Library'}" @click="selectedTab = 'Library'">Library</div>
    <div class="pt-5 pb-4 border-b-4 border-white ml-6 cursor-pointer" :class="{'border-teal-500': selectedTab === 'For you', 'opacity-50': selectedTab !== 'For you'}" @click="selectedTab = 'For you'">For you</div>
    <div class="pt-5 pb-4 border-b-4 border-white ml-6 cursor-pointer" :class="{'border-teal-500': selectedTab === 'Explore', 'opacity-50': selectedTab !== 'Explore'}" @click="selectedTab = 'Explore'">Explore</div>
    <div class="pt-5 pb-4 border-b-4 border-white ml-6 cursor-pointer" :class="{'border-teal-500': selectedTab === 'Radio', 'opacity-50': selectedTab !== 'Radio'}" @click="selectedTab = 'Radio'">Radio</div>
  </div>
  <!-- CONTENT -->
  <div class="flex-1 overflow-scroll">
    <div class="mt-5 text-3xl font-bold mx-6">{{selectedTab}}</div>
    <div class="flex flex-wrap mt-3 px-4">
      <div class="w-1/3 px-2 my-2">
        <div class="bg-white border border-gray-300 h-48 rounded"></div>
      </div>
      <div class="w-1/3 px-2 my-2">
        <div class="bg-white border border-gray-300 h-48 rounded"></div>
      </div>
      <div class="w-1/3 px-2 my-2">
        <div class="bg-white border border-gray-300 h-48 rounded"></div>
      </div>
      <div class="w-1/3 px-2 my-2">
        <div class="bg-white border border-gray-300 h-48 rounded"></div>
      </div>
      <div class="w-1/3 px-2 my-2">
        <div class="bg-white border border-gray-300 h-48 rounded"></div>
      </div>
      <div class="w-1/3 px-2 my-2">
        <div class="bg-white border border-gray-300 h-48 rounded"></div>
      </div>
    </div>
  </div>
</div>
var app = new Vue({
  el: '#app',
  data: {
    selectedTab: 'Library',
  },
  methods: {
    // functions go here
  }
})

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss@next/dist/tailwind.min.css
  2. https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js