<div id="app" class="text-black antialiased flex flex-col h-screen">
  <!-- LOGIN SCREEN -->
  <div v-if="!isUserLoggedIn" class="flex items-center justify-center h-screen">
    <div class="w-full max-w-xs border border-gray-300 rounded p-6 flex flex-col items-center">
      <div class="w-32 h-32 rounded-full bg-gray-300 mb-5"></div>
      <input type="text"
             placeholder="email"
             class="border-b border-gray-300 w-full py-2 focus:border-teal-500">
      <input type="password"
             placeholder="password"
             class="border-b border-gray-300 w-full py-2 focus:border-teal-500 mt-3">
      <button class="w-full bg-teal-500 py-3 mt-6 text-white rounded"
              @click="isUserLoggedIn = true">
        Login
      </button>
    </div>
  </div>
  <!-- APP SCREENS -->
  <div v-if="isUserLoggedIn">
    <!-- top nav -->
    <div class="h-16 flex items-center border-b border-gray-400 px-2">
      <div class="flex-1 font-bold px-4">
        App name
      </div>
      <button class="px-4" @click="currentTab = 'Newsfeed'">
      Newsfeed
    </button>
      <button class="px-4" @click="currentTab = 'Explore'">
      Explore
    </button>
      <button class="px-4" @click="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-indigo-300 mr-4"></div>
          <div class="flex-1">
            <div class="w-2/3 h-3 bg-indigo-300"></div>
            <div class="w-2/5 h-3 bg-indigo-300 mt-2"></div>
          </div>
        </div>
        <div class="mt-4 bg-indigo-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-indigo-300 mr-4"></div>
          <div class="flex-1">
            <div class="w-2/3 h-3 bg-indigo-300"></div>
            <div class="w-2/5 h-3 bg-indigo-300 mt-2"></div>
          </div>
        </div>
        <div class="mt-4 bg-indigo-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-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
        <div class="mx-1 h-12 w-12 bg-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
        <div class="mx-1 h-12 w-12 bg-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
        <div class="mx-1 h-12 w-12 bg-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
        <div class="mx-1 h-12 w-12 bg-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
        <div class="mx-1 h-12 w-12 bg-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
        <div class="mx-1 h-12 w-12 bg-green-300 rounded-full" style="width: 48px; min-width: 48px;"></div>
      </div>
      <!-- title -->
      <div class="w-2/5 h-3 bg-green-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-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 h-32 px-1 py-1">
          <div class="bg-green-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-pink-300 rounded-full "></div>
        <div class="w-48 h-3 bg-pink-300 mt-4"></div>
        <div class="w-32 h-3 bg-pink-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-pink-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 px-1 h-4">
          <div class="bg-pink-300 w-full h-full"></div>
        </div>
        <div class="w-1/3 px-1 h-4">
          <div class="bg-pink-300 w-full h-full"></div>
        </div>
      </div>
      <!-- posts -->
      <div class="mt-4 bg-pink-300 mx-3" style="height: 200px;"></div>
      <div class="mt-4 bg-pink-300 mx-3" style="height: 200px;"></div>
      <div class="mt-4 bg-pink-300 mx-3" style="height: 200px;"></div>
    </div>
  </div>
</div>

input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}

var app = new Vue({
  el: '#app',
  data: {
    currentTab: 'Newsfeed',
    isUserLoggedIn: false
  },
  methods: {
    // functions go here
  }
})