<div id="app" class="text-black antialiased flex flex-col h-screen">
  <!-- top nav -->
  <div class="flex items-center border-b border-gray-400 px-2">
    <div class="flex-1 font-bold px-4">
      App name
    </div>
    <button class="mx-4 pt-4 pb-3 border-b-4 border-white"
            @click="currentTab = 'Newsfeed'"
            :class="{'text-teal-500 border-teal-500': currentTab === 'Newsfeed'}">
      Newsfeed
    </button>
    <button class="mx-4 pt-4 pb-3 border-b-4 border-white"
            @click="currentTab = 'Explore'"
            :class="{'text-teal-500 border-teal-500': currentTab === 'Explore'}">
      Explore
    </button>
    <button class="mx-4 pt-4 pb-3 border-b-4 border-white"
            @click="currentTab = 'Profile'"
            :class="{'text-teal-500 border-teal-500': currentTab === 'Profile'}">
      Profile
    </button>
  </div>
  <!-- header -->
  <div class="px-6 py-3 text-3xl font-bold">
    {{currentTab}}
  </div>
  <!-- content: Newsfeed -->
  <div class="flex-1 overflow-scroll px-3" v-if="currentTab === 'Newsfeed'">
    <!-- post -->
    <div class="px-3 pt-6">
      <div class="flex items-start">
        <div class="w-12 h-12 bg-gray-300 mr-4"></div>
        <div class="flex-1">
          <div class="w-2/3 h-3 bg-gray-300"></div>
          <div class="w-2/5 h-3 bg-gray-300 mt-2"></div>
        </div>
      </div>
      <div class="mt-4 bg-gray-300 w-full" style="height: 200px;"></div>
    </div>
    <!-- post -->
    <div class="px-3 pt-6">
      <div class="flex items-start">
        <div class="w-12 h-12 bg-gray-300 mr-4"></div>
        <div class="flex-1">
          <div class="w-2/3 h-3 bg-gray-300"></div>
          <div class="w-2/5 h-3 bg-gray-300 mt-2"></div>
        </div>
      </div>
      <div class="mt-4 bg-gray-300 w-full" style="height: 200px;"></div>
    </div>
  </div>
  <!-- content: Explore -->
  <div class="flex-1 overflow-scroll px-3" v-if="currentTab === 'Explore'">
    <!-- stories -->
    <div class="flex items-center w-full overflow-x-scroll pt-6 pb-4">
      <div class="mr-1 ml-3 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      <div class="mx-1 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      <div class="mx-1 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      <div class="mx-1 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      <div class="mx-1 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      <div class="mx-1 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      <div class="mx-1 h-12 w-12 bg-gray-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
    </div>
    <!-- title -->
    <div class="w-2/5 h-3 bg-gray-300 ml-3 mt-4"></div>
    <!-- grid -->
    <div class="flex flex-wrap px-2 justify-between pt-6">
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
      <div class="w-1/3 h-32 px-1 py-1">
        <div class="bg-gray-300 w-full h-full"></div>
      </div>
    </div>
  </div>
  <!-- content: Profile -->
  <div class="flex-1 overflow-scroll px-3" v-if="currentTab === 'Profile'">
    <!-- profile -->
    <div class="flex flex-col items-center px-3 pt-4">
      <div class="w-24 h-24 bg-gray-300 rounded-full "></div>
      <div class="w-48 h-3 bg-gray-300 mt-4"></div>
      <div class="w-32 h-3 bg-gray-300 mt-2"></div>
    </div>
    <!-- log out -->
    <!-- <div class="text-center mt-6">
      <button class="" @click="isUserLoggedIn = false">Log out</button>
    </div> -->
    <!-- sections -->
    <div class="flex flex-wrap px-2 justify-between pt-6">
      <div class="w-1/3 px-1 h-4"><div class="bg-gray-300 w-full h-full"></div></div>
      <div class="w-1/3 px-1 h-4"><div class="bg-gray-300 w-full h-full"></div></div>
      <div class="w-1/3 px-1 h-4"><div class="bg-gray-300 w-full h-full"></div></div>
    </div>
    <!-- posts -->
    <div class="mt-4 bg-gray-300 mx-3" style="height: 200px;"></div>
    <div class="mt-4 bg-gray-300 mx-3" style="height: 200px;"></div>
    <div class="mt-4 bg-gray-300 mx-3" style="height: 200px;"></div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
   currentTab: 'Newsfeed'
  },
  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