JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<table>
    <tr>
        <td width="350" id="demo"></td>
        <td width="350">
            <img src="http://placehold.it/350x150" width="100%" />
            <img src="http://placehold.it/350x150" width="350" />
            <img src="http://placehold.it/350x150" />
        </td>
    </tr>
</table>
<script id="tpl" type="text/ractive">
    <img src="http://placehold.it/350x150" width="100%" />
    <img src="http://placehold.it/350x150" width="{{ 350 }}" />
    <img src="http://placehold.it/350x150" />
</script>

CSS

img {
    border: 1px solid black;
    box-sizing: border-box;
    display: block;
    margin: 1em 0;
}

JavaScript

new Ractive({
    el: 'demo' ,
    template: '#tpl'
});