<div class="status" id="app">
  <div class="tweet-content">
    <img src="https://pbs.twimg.com/profile_images/1070775214370373633/borvu2Xx_400x400.jpg" class="logo" alt="Vue Vixens DC logo">
    <div class="tweet">
      <a href="https://twitter.com/vuevixensdc">Vue Vixens DC</a>
      <span>@VueVixensDC · Mar 20</span>
      <p class="tweet-text">
        Hello, World!
      </p>
      <div class="reactions like">
        <span class="like">
          <span></span>
        </span>
      </div>
    </div>
  </div>
  <div class="comment-bar">
    <textarea placeholder="tweet your reply">
    </textarea>
    <span class="characters-remaining">
      280 characters remaining
    </span>
  </div>
</div>
body {
  background-color: #e6ecf0;
  font-family: sans-serif;
}

.tweet-content {
  display: flex;
  padding: 10px;
}

.status {
  width: 600px;
  margin: 20px auto;
  border-radius: 3px;
  background-color: white;
}

.logo {
  height: 75px;
  border-radius: 50%;
  padding: 5px;
}

.characters-remaining {
  font-size: 12px;
}

a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

span {
  color: grey;
}

.comment-bar {
  background-color: #f5f8fa;
  padding: 10px;
  border-top: 1px solid #e6ecf0;
}

textarea {
  width: 100%;
  border: 1px solid #1DA1F2;
  border-radius: 2px;
  padding: 2px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js