rohanverma.net/components/ContactCard.vue

<template>
  <div class="sm:flex items-center px-6 py-4">
    <img class="border shadow-md border-black block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="//avatars2.githubusercontent.com/u/952036?s=512" alt="profile photo">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl font-bold font-serif leading-tight">Rohan Verma</p>
        <p class="text-sm leading-tight text-grey-dark">Software Developer at <a class="no-underline text-grey-dark" href="https://zerodha.com/">Zerodha</a></p>
      </div>
      <div>
        <button @click="tweetHi" class="btn btn-black">
          Tweet @rhnvrm
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    tweetHi: function () {
      window.open('https://twitter.com/home?status=Hi%20%40rhnvrm', '_blank');
    }
  }
}
</script>