JSFiddle - React, Tailwind, and code Playground

by Damian Dulisz

HTML

<!-- When in HTML files that are used as a Vue template
     never do self-closing tags on components otherwise
     the first component will "eat" every sibiling after it. -->
<div id="app">
  <div class="wrapper">
    <first-component/>
    <!-- The second component won’t render -->
    <second-component/>
  </div>
  
  <div class="wrapper">
    <!-- Always add the closing tags -->
    <first-component></first-component>
    <second-component></second-component>
  </div>
  <a href="https://stackoverflow.com/a/3558200">Explanation</a>
  <p>NOTE: This is not required in templates inside <kbd>.vue</kbd> files.</p>
</div>

CSS

body {
  font-family: sans-serif;
}

.wrapper {
  padding: 20px;
  border: 1px solid #ddd;
  background: #fff;
}

p, kbd {
  font-size: 16px;
}

kbd {
  color: red;
}

JavaScript

Vue.component('first-component', {
	template: `<h1>I'm first</h1>`
})

Vue.component('second-component', {
	template: `<h2>I'm second</h2>`
})

new Vue().$mount('#app')