JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <hr>
  <div v-for="row in rows">
    <div v-for="column in row.columns">
      {{ column }}
    </div>
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  height: 100%;
  padding: 1rem;
}

.control button {
  font-size: 2rem;
}

.row {
  border: 1px solid black;
  height: 200px;
  margin-bottom: 1rem;
}

.column {
  border: 1px solid tomato;
}

JavaScript

const vm = new Vue({
	el: "#app",
  data () {
  	return {
	    rows: [
				{
        	name: '행',
          columns: [
          	{
            	name: '위젯이름',
              type: 'reservation-number',
              title: '0',
              style: {}
						}
          ]
				}      
      ]
		}
  }
})