JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <div class='container' id='app'>
    <h2>{{"title".toUpperCase()}}</h2>
    <p class='center help-text' v-if="multiple === 'true'">(Use ctrl or cmd to select multiple)</p>
    <select
      :multiple="multiple === 'true'"
      v-bind:class="{ 'fix-height': multiple === 'true' }"
      v-model="multipleSelections"
      >
      <option
        v-for="asset in assets"
        :value="asset">
        {{asset}}
      </option>
    </select>
    {{ multipleSelections }}
  </div>

CSS

* {
  font-family: Roboto;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}
p.center {
  text-align: center;
}
p.help-text {
  margin:
}
.container {
  width: 250px;
  background: white;
  box-shadow: 1px 1px 3px #000;
  padding: 10px;
}
h2 {
  text-align: center;
  margin: 0;
  padding: 10px 0 5px 0;
}
select {
  padding: 3px;
  width: 100%;
  border-radius: 3px;
}
select.fix-height {
  height: 200px;
}
options {
  padding: 10px;
  margin: 2px;
  border:1px solid #052f5f;
  background: linear-gradient(rgb(255,255,255), rgb(224,224,224));
  color: #052f5f;
  border-radius: 3px;
  box-shadow: 0 0 3px #000;
  cursor: pointer;
}
options.active {
  border:1px solid white;
  background: linear-gradient(#0e4f9a, #052f60);
  color: white;
}

JavaScript

new Vue({
	el:'#app',
  data: function() {
    return {
      multipleSelections: ["Mr Potato (Manager)"],
      data: null,
      multiple: "true",
      assets:["Mr Potato (Manager)", "Mr Blade (Manager)", "Mrs Spice (Manager)"]
    }
  },
//  props: ['assets','title', 'multiple'],
  created() {
    console.log("selections: ",this.multipleSelections);
  }
});