<div id="app" class="text-black antialiased">
  <!-- RECENT -->
  <div v-if="!doShowChat" class="h-screen flex flex-col">
    <!-- top bar -->
    <div class="border-b border-grey-light pt-8 px-4">
      <div class="text-3xl font-bold pb-3 pt-5">
        Recent
      </div>
    </div>
    <!-- content -->
    <div class="flex-1 overflow-scroll pt-2">
      <!-- list item -->
      <div class="flex items-center py-2 hover:bg-gray-100 cursor-pointer" @click="doShowChat = true; selectedChat = 'Joe Cole'">
        <div class="w-16 h-16 rounded-full bg-grey-lighter ml-3 mr-3 overflow-hidden">
          <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc2NjczMzQwMV5BMl5BanBnXkFtZTgwNTczMzcxNjE@._V1_UY256_CR42,0,172,256_AL_.jpg" class="w-16">
        </div>
        <div>
          <div>Joe Cole</div>
          <div class="text-grey-dark pt-1">Sounds good, thanks!</div>
        </div>
      </div>
      <!-- list item -->
      <div class="flex items-center py-2 hover:bg-gray-100 cursor-pointer" @click="doShowChat = true; selectedChat = 'Michael B. Jordan'">
        <div class="w-16 h-16 rounded-full bg-grey-lighter ml-3 mr-3 overflow-hidden">
          <img src="https://m.media-amazon.com/images/M/MV5BMjExOTY3NzExM15BMl5BanBnXkFtZTgwOTg1OTAzMTE@._V1_UX172_CR0,0,172,256_AL_.jpg" class="w-16">
        </div>
        <div>
          <div>Michael B. Jordan</div>
          <div class="text-grey-dark pt-1">Are you joining us for...</div>
        </div>
      </div>
      <!-- list item -->
      <div class="flex items-center py-2 hover:bg-gray-100 cursor-pointer" @click="doShowChat = true; selectedChat = 'Linnea Berthelsen'">
        <div class="w-16 h-16 rounded-full bg-grey-lighter ml-3 mr-3 overflow-hidden">
          <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BN2JhY2M2Y2QtZDBjOS00MjY2LWJhMjEtZWNjNTQ3MTE0YzBlXkEyXkFqcGdeQXVyNjE5MDgzMjI@._V1_UY256_CR10,0,172,256_AL_.jpg" class="w-16">
        </div>
        <div>
          <div>Linnea Berthelsen</div>
          <div class="text-grey-dark pt-1">Hopefully 🤞💁‍♀️</div>
        </div>
      </div>
      <!-- list item -->
      <div class="flex items-center py-2 hover:bg-gray-100 cursor-pointer" @click="doShowChat = true; selectedChat = 'Veronika Ngo'">
        <div class="w-16 h-16 rounded-full bg-grey-lighter ml-3 mr-3 overflow-hidden">
          <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNjc3NTI5Mzk2NV5BMl5BanBnXkFtZTgwMDgzNjM2MDI@._V1_UX172_CR0,0,172,256_AL_.jpg" class="w-16">
        </div>
        <div>
          <div>Veronika Ngo</div>
          <div class="text-grey-dark pt-1">I would love to but I need...</div>
        </div>
      </div>
      <!-- list item -->
      <div class="flex items-center py-2 hover:bg-gray-100 cursor-pointer" @click="doShowChat = true; selectedChat = 'Zack Ward'">
        <div class="w-16 h-16 rounded-full bg-grey-lighter ml-3 mr-3 overflow-hidden">
          <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA4ODk0MDMwM15BMl5BanBnXkFtZTcwODMxNDc4Nw@@._V1_UY256_CR74,0,172,256_AL_.jpg" class="w-16">
        </div>
        <div>
          <div>Zack Ward</div>
          <div class="text-grey-dark pt-1">🔥🔥🔥</div>
        </div>
      </div>
    </div>
  </div>
  <!-- CHAT -->
  <div v-if="doShowChat" class="h-screen flex flex-col">
    <!-- top bar -->
    <div class="flex items-center border-b border-grey-light py-3 px-4">
      <div class="w-8 text-2xl pt-1" @click="doShowChat = false">
        <div class="ion-md-arrow-back text-2xl text-teal-500 cursor-pointer"></div>
      </div>
      <div class="flex-1 text-center text-lg font-bold">{{selectedChat}}</div>
      <div class="w-8"></div>
    </div>
    <!-- content -->
    <div class="flex-1 overflow-scroll flex flex-col-reverse px-4">
      <!-- message -->
      <div class="flex py-2">
        <div class="flex-1"></div>
        <div class="bg-teal-500 rounded-full text-white px-3 py-2">Thanks a lot! 😌</div>
      </div>
      <!-- message -->
      <div class="flex py-2">
        <div class="bg-gray-200 rounded-full px-3 py-2">Got you a coffee. It’s on your desk.</div>
        <div class="flex-1"></div>
      </div>
    </div>
    <!-- bottom bar -->
    <div class="flex items-center pb-3 px-4 pt-3">
      <div class="flex-1">
        <input type="text" class="w-full border border-grey-light rounded-full px-4 py-2" placeholder="Enter you message">
      </div>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

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