JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/janl/mustache.js/master/mustache.js"></script>
<script id="template1" type="x-tmpl-mustache">
	{{#items}}
		<a href="{{url}}">
			<div class="text">{{text}}</div>
		</a>
	{{/items}}
    <div style="clear:both"></div>
</script>

<script id="template2" type="x-tmpl-mustache">{{#items}}<a href="{{url}}"><div class="text">{{text}}</div></a>{{/items}}</script>

<h1>With indent</h1>
<div id="target1"></div>
<hr>
<h1>Without indent</h1>    
<div id="target2"></div>
<hr>
<h1>Removed tabs and line breaks</h1>
<div id="target3"></div>

CSS

.text{
    height: 99px;
    width: 141px;
    background-color: red;
    display: inline-block;
}
a{
    margin-right: 12px;
    color: black;
    float: left;
}

JavaScript

var template1 = $('#template1').html();
var template2 = $('#template2').html();
var template3 = $('#template1').html();
template3 = template3.replace(/(\r\n|\n|\r|\t)/gm,"");

var data = {items: [
                        {
                            url: "example1.com",
                            text: "example1"
                        },
                        {
                            url: "example2.com",
                            text: "example2"
                        }
                    ]};

var rendered1 = Mustache.render(template1, data);

var rendered2 = Mustache.render(template2, data);

var rendered3 = Mustache.render(template3, data);

$('#target1').html(rendered1);
$('#target2').html(rendered2);
$('#target3').html(rendered3);