<div id="app" class="text-black antialiased flex h-screen">
  <!-- left sidebar -->
  <div class="w-64 border-r border-gray-300">
    <div class="px-4 pt-8 mt-6 pb-2 text-gray-500 text-xs uppercase">channels</div>
    <div>
      <div v-for="(channel, i) in channels"
           class="flex items-center hover:bg-gray-200 px-4 cursor-pointer"
           @click="selectChannel(i)">
        <div class="flex-1 py-1"><span class="text-gray-500">#</span> {{channel.name}}</div>
        <div class="text-xs text-teal-500">{{channel.unread}}</div>
      </div>
    </div>
  </div>
  <!-- main content -->
  <div class="flex-1">
    <div class="border-b border-gray-300 flex items-center">
      <div class="flex-1 text-lg font-semibold px-5 py-3">
        {{channels[selectedChannel].name}}
      </div>
      <button class="ion-md-call p-3 text-xl text-teal-500"></button>
      <button class="ion-md-videocam p-3 text-xl text-teal-500"></button>
      <button class="ion-md-image p-3 text-xl text-teal-500"></button>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    selectedChannel: 0,
    channels: [
      {
        name: 'general',
        unread: 6
      },
      {
        name: 'vuejs',
        unread: 240
      },
      {
        name: 'tailwindcss',
        unread: 17
      },
      {
        name: 'mockupless',
        unread: 2
      },
    ]
  },
  methods: {
    selectChannel (index) {
      this.selectedChannel = index
    }
  }
})

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