JSFiddle - React, Tailwind, and code Playground

by riverside256

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<div class="app">
  <basic-layout>
    <my-header slot="header"></my-header>
    
    <p>Content from &lt;main&gt; tag</p>
    
    <p slot="footer">Content from footer</p>
  </basic-layout>
</div>

CSS

.header {
  background: #339966; /* your header should be green */
}

JavaScript

//1. Create basicLayout component
var basicLayout = Vue.component("basic-layout", {
	template: `
  
  <div class="basic-layout">
  	<header>
    	<slot name="header"></slot>
    </header>
    
    <main>
    	<slot></slot>
    </main>
    
    <footer>
    	<slot name="footer"></slot>
    </footer>
  </div>
  
  `
});

//2. Create my-header component or whatever you want XDD
var myHeader = Vue.component("my-header", {
	template: `
  
  <div class="header">
  	<ul>
    	<li>HOME</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </ul>
  </div>
  
  `
});


//initialization od our app
var app = new Vue({
 el: ".app",
 components: {
 	"basic-layout": basicLayout,
  "my-header": myHeader
 }
});