JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jsviews.com/download/jsrender.js"></script>
<div id="content1">
</div>
<div id="content2">
</div>


<script id="tmpl1" type="text/x-jsrender">
    {{if type eq='photo'}}
    <img src="{{:src}}" />
    <div class="photo-caption">
        {{:caption}}
    </div>
    {{/if}}
{{if type eq='quote'}}
    <div class="quote-text">
        {{:text}}
    </div>
{{/if}}
</script>
<script id="tmpl2" type="text/x-jsrender">
    {{if type eq='photo'}}
    <img src="{{:src}}" />
    <div class="photo-caption">
        {{:caption}}
    </div>
{{else type eq='quote'}}
    <div class="quote-text">
        {{:text}}
    </div>
{{/if}}
</script>

CSS

div {
    border:1px solid black;
}
div div {
    border: none;
}

JavaScript

var model =  [{
    content: "",
    type: "photo",
    src: "xxx"
}, {
    content: "",
    type: "quote",
    text: "blah"
}];

$('#content1').html($('#tmpl1').render(model));
$('#content2').html($('#tmpl2').render(model));