JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<!-- handlebarsjs.com template - loaded within a page it then makes a call to the backend to load navigation data -->
<script id="checkoutput" type="text/html">
<div class="expand-wrapper">
	<!-- navigation system is loaded after initial load -->
	<div class="cs-navigation" data-cs-navigation></div>
</div>

<div class="content-wrapper">
	<!-- Template: /dyn/_content_streams/portfolio/.data/template_article_1.ssi -->
	{{#each articles}}
	<div class="cs-article-detail" data-cs-folder="portfolio" data-cs-unique-id="{{UniqueID}}">
		{{#if Picture1}}
		<div class="cs-content-wrapper cs-content-wrapper-custom">
			<div class="cs-article-main-image cs-article-main-image-custom">
				{{#hasTag "Availability" "sold"}}
				<div class="cs-sold-banner"></div>
				<div class="cs-sold-text"><p>sold</p></div>
				{{/hasTag}}
				<img src="{{Picture1.Path}}" alt="{{Picture1.Title}}"/>
			</div>
		</div>
		{{/if}}

		<div class="cs-content-wrapper cs-content-wrapper-custom">
			<div class="cs-content-block cs-content-block-custom">
				<div class="cs-article-copy cs-article-copy-custom">
					<h1 class="cs-header">{{Heading}}</h1>
					<h2 class="cs-subheader">{{{SubHeading}}}</h2>
					<!--triple brackets for escaped valuue returned by an expression-->
					<p class="cs-body">{{{Description}}}</p>
					{{#if Extra.Link}}
					<span class="cs-listing-cta cs-listing-cta-custom">
						<a href="{{Extra.Link}}" {{#if Extra.LinkTarget}} target="{{Extra.LinkTarget}}" {{/if}} class="cs-listing-cta-btn cs-listing-cta-custom">{{Extra.LinkText}}</a>
					</span>
					{{/if}}
					{{#unless YouTube1}}
						{{#if Video1}}
					<div class="cs-video-container cs-video-container-custom">	
						<video src="{{Video1.Path}}" type="video/mp4" controls {{#if Video1.Autoplay}}autoplay{{/if}}>
							Sorry, your browser doesn't support embedded...

JavaScript

var myData = {
	"articles": [{
		"Extra": {},
		"Folder": "Powder Ribbon / Plough Share Blenders",
		"Heading": "200, 300, 400, 800 litre Stainless steel Ribbon Blenders  -  In Stock",
		"Meta": [{
			"name": "description",
			"content": "",
			"type": "Name"
		}, {
			"name": "keywords",
			"content": "",
			"type": "Name"
		}, {
			"name": "robots",
			"content": "",
			"type": "Name"
		}, {
			"name": "googlebot",
			"content": "",
			"type": "Name"
		}, {
			"name": "rating",
			"content": "",
			"type": "Name"
		}, {
			"name": "author",
			"content": "",
			"type": "Name"
		}, {
			"name": "og:image",
			"content": "",
			"type": "Property"
		}],
		"CallToAction": "Read more",
		"UniqueID": "5252",
		"EndDateTime": "",
		"PubDateTime": "13/04/2018 11:55",
		"Picture1": {
			"Height": 240,
			"Width": 320,
			"Path": "/dyn/_content_streams/portfolio/mixers-blenders/powder-ribbon-plough-share-blenders/500ws.jpg",
			"AspectRatio": 0.75,
			"Title": ""
		},
		"Template": "template_article_2.ssi",
		"StartDateTime": "",
		"CountryFilter": "*",
		"Include": "1",
		"index": 0,
		"Path": "/portfolio/powder-ribbon-plough-share-blenders/200-300-400-800-litre-stainless-steel-ribbon-blenders-in-stock/5252/",
		"Tags": [{
			"tag": "In Stock",
			"property": "Availability"
		}, {
			"tag": "Mixers / Blenders",
			"property": "Navigation"
		}, {
			"tag": "New",
			"property": "Condition"
		}, {
			"tag": "Ribbon Blender",
			"property": "Machine Type"
		}, {
			"tag": "Stainless Steel",
			"property": "Construction"
		}],
		"Description": "NEW 100 - 800 litre stainless steel interupted ribbon blender<br/>Either complete or partially complete for short lead time deliveries<br/>Stainless Steel Mixing shaft<br/>End plates & Body in stainless steel<br/>Motor & gearbox, interupted ribbon, outlet valve & discharge height all to suit customer's requirement  <br/>Hinged lid with safety interlock",
		"SubHeading": ""
	}, {
		"Extra": {},
		"Folder": "Powder...