JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Mustache.js example - blog.kevinchisholm.com -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>Mustache.js Test Page</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
    </head>  
    <body>
    	<!-- this is the HTML template -->
		<script type="text/html" id="template">
				<h1>My Favorite European Cities</h1>
				<ul>
					{{#cities}}
					<li>{{name}}</li>
					{{/cities}}
				</ul>
		</script>

    	<!-- this div is empty on page load -->
		<div id="container"></div>

		<script>
			(function(){
				//this is our JSON (data)

				var data = {
					"cities": [
						{"name": "London"},
						{"name": "Paris"},
						{"name": "Munich"}
					]
				},
				
				//get a reference to our HTML template
				template = $('#template').html(),

				//tell Mustache.js to iterate through the JSON and insert the data into the HTML template
				output = Mustache.render(template, data);

				//append the HTML template to the DOM
				$('#container').append(output);
			})();
		</script>
    </body> 
</html>