Vue

by Max Sinev

HTML

<div id="app">
  <div class="message">
    <div>
      {{ msg1 }}
    </div>
  </div>
  <div class="message">
    <div>
      {{ msg2 }}
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.message {
  border-radius: 20px 20px 5px 20px;
  padding: 20px;
  background: #aaa;
  margin-bottom: 10px;
  margin-left: 200px;
  font-size: 14px;
}

Vue

new Vue({
  el: "#app",
  data: {
    msg1: "Well, the way they make shows is.",
    msg2: "That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows."
  }
});

var str="Well, the way they make shows is, they make one show. That show\'s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they\'re going to make more shows. Some pilots get picked and become television programs. Some don\'t, become nothing. She starred in one of the ones that became nothing.";