<div id="app">
  <h1>Heroes</h1>
  <ul>
    <li v-for="name in names">
      {{ name }}
    </li>
  </ul>
</div>

body {
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
  color: #2c0938;
  font-family: 'Signika', sans-serif;
}

#app {
  width: 270px;
  background: white;
  padding: 20px;
  margin: 30px;
  border-radius: 4px;
  opacity: 0.95;
}

h1 {
  text-align: center;
  margin: 5px;
}

li {
  list-style: none outside none;
}

new Vue({
  el: '#app',
  data() {
    return {
      names: [
        'Evan You',
        'John Lindquist',
        'Jen Looper',
        'Miriam Suzanne',
        'Chris Coyier',
        'Geoff Graham',
        'Divya Sasidharan',
        'Lea Verou',
        'Rachel Andrew',
        'Vitaly Friedman',
        'Ryan Florence',
        'Dan Abramov',
        'Jen Simmons',
        'Robin Rendle',
        'Nicole Sullivan'
      ]
    }
  }
})