<div id="app" class="text-black antialiased h-screen flex justify-center items-center">
  <!-- LEFT COL -->
  <div class="w-full max-w-sm flex flex-col">
    <!-- list -->
    <div class="flex-1 overflow-scroll">
      <div v-for="contact in contacts" class="hover:bg-gray-100 flex items-center">
        <div class="w-16 h-16 ml-3 bg-gray-200 rounded-full overflow-hidden">
          <img :src="contact.photo" class="" alt="">
        </div>
        <div class="flex-1 py-4 ml-4 border-b border-gray-300">
          <div class="flex items-baseline pr-3">
            <div class="flex-1" :class="{'font-bold': contact.unread}">
              {{contact.nameFirst}} {{contact.nameLast}}
            </div>
            <div class="text-xs" :class="{'text-gray-500': !contact.unread}">
              {{contact.time}}
            </div>
          </div>
          <div class="flex items-center">
            <div class="flex-1" :class="{'text-gray-500': !contact.unread}">
              {{contact.message}}
            </div>
<!--             <div v-if="contact.unread" class="w-2 h-2 bg-teal-500 rounded-full mr-3 mt-1"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #B8C2CC;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    contacts: [
      {
        nameFirst: 'Joe',
        nameLast: 'Cole',
        message: 'Have they heard of Klimt anyway?',
        time: '12:15 AM',
        unread: true,
        photo: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMTc2NjczMzQwMV5BMl5BanBnXkFtZTgwNTczMzcxNjE@._V1_UY256_CR42,0,172,256_AL_.jpg'
      },
      {
        nameFirst: 'Michael B.',
        nameLast: 'Jordan',
        message: 'No way! Thursday was supposed...',
        time: '8:37 AM',
        unread: true,
        photo: 'https://m.media-amazon.com/images/M/MV5BMjExOTY3NzExM15BMl5BanBnXkFtZTgwOTg1OTAzMTE@._V1_UX172_CR0,0,172,256_AL_.jpg'
      },
      {
        nameFirst: 'Linnea',
        nameLast: 'Berthelsen',
        message: 'You: sounds good!',
        time: '8:04 AM',
        unread: true,
        photo: 'https://images-na.ssl-images-amazon.com/images/M/MV5BN2JhY2M2Y2QtZDBjOS00MjY2LWJhMjEtZWNjNTQ3MTE0YzBlXkEyXkFqcGdeQXVyNjE5MDgzMjI@._V1_UY256_CR10,0,172,256_AL_.jpg'
      }
    ]
  },
  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