Improvisation work at about 1 hour (Using tailwindcss) https://play.tailwindcss.com/kD7TbSJha9

main.html

<div class="card">
  <div class="card-header">
    <img class="card-header-image" alt="acct" src="https://avatars.githubusercontent.com/u/18282413?v=4">
    <div class="card-header-name">
      <h3>Display name</h3>
      <small>@username</small>
    </div>
  </div>
  <div class="card-body">
    <p>Text here text here</p>
    <p>The brown fox jumps over the lazy dog.</p>
  </div>
  <div class="card-body">
    <button class="button-active">
      🥰
      <span class="badge">1</span>
    </button>
    <button>
      🥖
      <span class="badge">2</span>
    </button>
    <button disabled>
      🤷‍♀️
      <span class="badge">3</span>
    </button>
  </div>
  <div class="card-action">
    <a class="action-button" href="#" onclick="return false;">↩️</a>
    <a class="action-button" href="#" onclick="return false;">🔁</a>
    <a class="action-button" href="#" onclick="return false;">❤️</a>
    <a class="action-button" href="#" onclick="return false;">⤵️</a>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <img class="card-header-image" alt="acct" src="https://avatars.githubusercontent.com/u/18282413?v=4">
    <div class="card-header-name">
      <h3>Display name</h3>
      <small>@username</small>
    </div>
  </div>
  <div class="card-body">
    <p>Text here text here</p>
    <p>The brown fox jumps over the lazy dog.</p>
  </div>
  <div class="card-body">
    <button class="button-active">
      🥰
      <span class="badge">1</span>
    </button>
    <button>
      🥖
      <span class="badge">2</span>
    </button>
    <button disabled>
      🤷‍♀️
      <span class="badge">3</span>
    </button>
  </div>
  <div class="card-action">
    <a class="action-button" href="#" onclick="return false;">↩️</a>
    <a class="action-button" href="#" onclick="return false;">🔁</a>
    <a class="action-button" href="#" onclick="return false;">❤️</a>
    <a class="action-button" href="#" onclick="return false;">⤵️</a>
  </div>
</div>

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.card {
  @apply rounded-lg border border-gray-300 m-2 drop-shadow-sm p-3 sm:p-5;
}

.card-header {
  @apply flex;
}

.card-header-image {
  @apply h-14 w-14 rounded-full;
}

.card-header-name {
  @apply flex-auto ml-3;
}

.card-header h3 {
  @apply text-xl font-sans;
}

.card-header small {
  @apply text-sm font-mono;
}

.card-body {
  @apply py-1 sm:py-2;
}

button {
  @apply py-1 px-2 border border-gray-600 rounded-xl;
}

button:hover {
  @apply bg-gray-600 text-white;
}

button:active, .button-active {
  @apply bg-gray-900 text-white;
}

button:disabled {
  @apply border-gray-400
}

button:disabled:hover {
  @apply bg-inherit text-inherit;
}

.badge {
  @apply px-1 bg-gray-200 rounded-lg text-black font-mono;
}

.action-button {
  @apply mx-6 md:mx-8 my-4;
}