JSFiddle - React, Tailwind, and code Playground

by ritcheyer

HTML

<h2 class="page-title">Getting Started</h2>
<div class="lifecycle">
	<div class="page-intro">
		<h3 class="intro-head">Welcome!</h3>
		<p class="intro-para">If this is your first login, your account has been setup with <a href="/storage/">shared cloud storage</a> and <a href="/acctmgmt/cloudacct/">default cloud accounts.</a></p>
	</div>
	<ul class="lifecycle-image">
		<li class="lifecycle-contain lifecycle-onboard" title="On-board an App" data-trigger="hover" data-content="Upload and model your application or workflow as a cloud enabled App in a few simple steps.">
			<p class="lifecycle-title">
				<a href="/app/selectTemplate/" title="On-board an App" class="lifecycle-trigger">
					<i class="lifecycle-icon icon-arrow-up" aria-hidden="true"></i>
					On-Boarding
				</a>
			</p>
		</li>
		<li class="lifecycle-contain lifecycle-benchmark" title="Benchmarking" data-trigger="hover" data-content="Interested in seeing how your application will perform on the different clouds?">
			<p class="lifecycle-title">
				<a href="/app/" title="Benchmark a current application" class="lifecycle-trigger">
					<i class="lifecycle-icon icon-signal" aria-hidden="true"></i>
					Benchmarking
				</a>
			</p>
		</li>
		<li class="lifecycle-contain lifecycle-deploy" title="Deploy" data-trigger="hover" data-content="With our easy-to-use wizard, you can easily deploy any of your applications to the cloud of your choosing">
			<p class="lifecycle-title">
				<a href="/app/" title="Deploy an Application" class="lifecycle-trigger">
					<i class="lifecycle-icon icon-upload-alt" aria-hidden="true"></i>
					Deploy
				</a>
			</p>
		</li>
		<li class="lifecycle-contain lifecycle-manage" title="Manage an Application" data-trigger="hover" data-content="Not that you've on-boarded an application, you may want to manage it.">
			<p class="lifecycle-title">
				<a href="/app/" title="Manage an Application" class="lifecycle-trigger">
					<i class="lifecycle-icon icon-dashboard"...

JavaScript

(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['dashboard']=(function (Handlebars,depth0,helpers,partials,data) {
  helpers = helpers || Handlebars.helpers;
  


  return "<h2 class=\"page-title\">Getting Started</h2>\n<div class=\"lifecycle\">\n	<div class=\"page-intro\">\n		<h3 class=\"intro-head\">Welcome!</h3>\n		<p class=\"intro-para\">If this is your first login, your account has been setup with <a href=\"/storage/\">shared cloud storage</a> and <a href=\"/acctmgmt/cloudacct/\">default cloud accounts.</a></p>\n	</div>\n	<ul class=\"lifecycle-image\">\n		<li class=\"lifecycle-contain lifecycle-onboard\" title=\"On-board an App\" data-trigger=\"hover\" data-content=\"Upload and model your application or workflow as a cloud enabled App in a few simple steps.\">\n			<p class=\"lifecycle-title\">\n				<a href=\"/app/selectTemplate/\" title=\"On-board an App\" class=\"lifecycle-trigger\">\n					<i class=\"lifecycle-icon icon-arrow-up\" aria-hidden=\"true\"></i>\n					On-Boarding\n				</a>\n			</p>\n		</li>\n		<li class=\"lifecycle-contain lifecycle-benchmark\" title=\"Benchmarking\" data-trigger=\"hover\" data-content=\"Interested in seeing how your application will perform on the different clouds?\">\n			<p class=\"lifecycle-title\">\n				<a href=\"/app/\" title=\"Benchmark a current application\" class=\"lifecycle-trigger\">\n					<i class=\"lifecycle-icon icon-signal\" aria-hidden=\"true\"></i>\n					Benchmarking\n				</a>\n			</p>\n		</li>\n		<li class=\"lifecycle-contain lifecycle-deploy\" title=\"Deploy\" data-trigger=\"hover\" data-content=\"With our easy-to-use wizard, you can easily deploy any of your applications to the cloud of your choosing\">\n			<p class=\"lifecycle-title\">\n				<a href=\"/app/\" title=\"Deploy an Application\" class=\"lifecycle-trigger\">\n					<i class=\"lifecycle-icon icon-upload-alt\"...