<div id="app">
<label for="textarea">What is your favorite kind of taco?</label>
<textarea id="textarea" v-model="tacos"></textarea>
<br>
<button v-show="tacos">Let us know!</button>
</div>
body {
font-family: 'Bitter', serif;
}
#app {
text-align: center;
padding: 70px;
max-width: 360px;
font-size: 16px;
margin: 0 auto;
display: table;
line-height: 2em;
}
label {
padding-right: 10px;
font-size: 18px;
font-weight: bold;
}
button {
border: none;
color: white;
padding: 0.5em 1em;
border-radius: 3px;
background: orangered;
}
textarea {
margin-top: 10px;
}
View Compiled
new Vue({
el: '#app',
data() {
return {
tacos: ''
}
}
})
View Compiled
This Pen doesn't use any external CSS resources.