JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<div class="template">

</div>

<script id="people-template" type="text/x-handlebars-template">
  {{#each people}}
    {{> person}}
  {{/each}}
</script>
 
<script id="person-partial" type="text/x-handlebars-template">
  <div class="person">
    <h2>{{first_name}} {{last_name}}</h2>
    <div class="phone">{{phone}}</div>
    <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
    <div class="since">User since {{member_since}}</div>
  </div>
</script>

JavaScript

var yourData = {
	people: [
		{
			'first_name': 'Hugo',
			'last_name': 'Carneiro',
			'phone': '07932077290',
			'member_since': '2014',
			'email': '[email protected]'
		},
		{
			'first_name': 'Hugo',
			'last_name': 'Carneiro',
			'phone': '07932077290',
			'member_since': '2014',
			'email': '[email protected]'
		},
		{
			'first_name': 'Hugo',
			'last_name': 'Carneiro',
			'phone': '07932077290',
			'member_since': '2014',
			'email': '[email protected]'
		}
	]
}

$(document).ready(function() {
	var template = Handlebars.compile($("#people-template").html());
	Handlebars.registerPartial("person", $("#person-partial").html());

	$('.template').html(template(yourData));
});