Vue

by Alex Kyriakidis

HTML

<html>
<div id="app" class="container mx-auto py-6">
  <header>
    <div>
      <span id="logo">Liquid Gold Box</span>
    </div>
  </header>
  
  <div class="content">
    <h1 class="title">Coffee Plans</h1>
    
    <h2 class="subtitle">
      We travel the world to source the very best single origin coffee for you
    </h2>
    
    <div class="plans">
      <plan 
        v-for="plan in plans"
        :name="plan"
      ></plan>
    </div>
  </div>
</div>

<script type="text/x-template" id="plan-template">
  <div class="plan">
    <div class="description">
      <span class="title">
        {{name}}
      </span>
    </div>
  </div>
</script>

<script src="https://unpkg.com/vue"></script>

CSS

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  
  html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
  }
  
  body {
    margin: 0
  }
  
  header,
  nav,
  section {
    display: block
  }
  
  h1 {
    font-size: 2em;
    margin: .67em 0
  }
  
  figcaption,
  main {
    display: block
  }
  
  hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
  }
  
  a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
  }
  
  strong {
    font-weight: inherit;
    font-weight: bolder
  }
  
  code {
    font-family: monospace, monospace;
    font-size: 1em
  }
  
  dfn {
    font-style: italic
  }
  
  img {
    border-style: none
  }
  
  svg:not(:root) {
    overflow: hidden
  }
  
  button,
  input,
  textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
  }
  
  button,
  input {
    overflow: visible
  }
  
  button {
    text-transform: none
  }
  
  [type=reset],
  [type=submit],
  button,
  html [type=button] {
    -webkit-appearance: button
  }
  
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner,
  button::-moz-focus-inner {
    border-style: none;
    padding: 0
  }
  
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring,
  button:-moz-focusring {
    outline: 1px dotted ButtonText
  }
  
  legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
  }
  
  textarea {
    overflow: auto
  }
  
  [type=checkbox],
  [type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
  }
  
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto
  }
  
  [type=search] {
   ...

Vue

Vue.component('plan', {
    template: '#plan-template',
    props: {
      name: {
        type: String
      }
    }
  })
  new Vue({
    el: '#app',
    data: {
      plans: ["The Single", "The Curious", "The Addict"]
    }
  })