JSFiddle - React, Tailwind, and code Playground

by flourscent

HTML

<script src="https://unpkg.com/[email protected]"></script>

<div id="fruits-list">
  <page-header class="header">
    <h1 slot="header">
      겨울 과일
    </h1>
  </page-header>
  <page-content class="content">
    <ul slot="content">
      <li>사과</li>
      <li>딸기</li>
    </ul>
  </page-content>
</div>

CSS

.header h1{
  width: 100%;
  height: 30px;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  padding: 30px 15px;
}

.content li {
  width: 100%;
  height: 30px;
  padding: 30px 15px;
  background-color: white;
  border: 1px solid #d3d3d3;
  text-align: left;
}

JavaScript

var headerTemplate = `
  <div>
    <slot name="header">No title</slot>
  </div>
`

var contentTemplate = `
  <div>
    <slot name="content">No contents</slot>
  </div>
`

Vue.component('page-header', {
  template: headerTemplate
})
Vue.component('page-content', {
  template: contentTemplate
})

new Vue({
  el: "#fruits-list"
})