JSFiddle - React, Tailwind, and code Playground

App Email Template

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<form class="form-horizontal">
    <div class="form-group">
        <label for="textinput0" class="col-sm-6 control-label">First name </label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="textinput0" value="Hugo" data-label="first name">
        </div>
    </div>
    <div class="form-group">
        <label for="textinput1" class="col-sm-6 control-label">Last name </label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="textinput1" value="Carneiro" data-label="last name">
        </div>
    </div>
    <div class="form-group">
        <label for="textinput1" class="col-sm-6 control-label">Year you were born <span class="not-required">(Optional)</span></label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="textinput2" value="1987" data-label="year you were born">
        </div>
    </div>
    <div class="form-group">
        <label for="textinput1" class="col-sm-6 control-label">Present year </label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="textinput3" value="2015" data-label="present year">
        </div>
    </div>
    <hr>
    <button type="button" class="btn btn-primary" id="preview-template">Preview</button>
</form>
<script type="text/x-handlebars-template" id="email-template">
    {{#compare [Present year] ">" [Year you were born]}}
    <p>{{[First name]}} {{[Last name]}} was born in {{[Year you were born]}}.</p>
    {{else}}
    <p>{{[First name]}} {{[Last name]}} wasn't born yet.</p>
    {{/compare}}
    
    {{#contains "Hugo" checkbox2}}
        The field contains {{[First name]}}
    {{else}}
       ...

CSS

.form-horizontal {
    padding: 40px 25px 0 25px;
}

.form-horizontal .form-group {
    margin-bottom: 0;
    padding: 15px 0;
}

.form-horizontal .form-group:first-child {
    margin-top: 0px;
}

.form-horizontal .preview-buttom {
    padding-top: 7px;
}

.overlayPanelContent iframe {
    width: 100%;
    border: none;
}

/*
===========================
CONTENTS:

01 Overlay 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Overlay --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body.overlayIsActive {
    overflow: hidden;
}

body.overlayIsActive > :not(.overlay),
body.overlayIsActive > :not(.overlay) * {
	pointer-events: none;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: none;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transform: translate3d(0,0,0);
    pointer-events: none;
}

.overlay.active {
	pointer-events: all;
}

.overlayPanelScreen {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 19999;
	background: rgba(0,0,0,0.7);
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	opacity: 0;
	pointer-events: none;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

.overlay.active .overlayPanelScreen {
	opacity: 1;
	pointer-events: all;
}

.overlayPanel {
	position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
	background: rgba(0,0,0,0.3);
	z-index: 20000;
	padding: 0px;
	-webkit-border-radius: 5px;
 	-webkit-transform: translate3d(0,0,0) scale(0);
 	transform: translate3d(0,0,0) scale(0);
}

.overlay.active...

JavaScript

// FORM DATA
formData = {
    textinput0 : "Hugo",
    textinput1 : "Carneiro",
    textinput2 : "1987",
    textinput3 : "2015",
    checkbox2 : ["Fliplet","Hugo","Yay"],
}

var newFormData = {}

// Opens preview Email Template overlay
$(document).on('click', '#preview-template', function() {
    // GET TEMPLATE HTML
    var string = $("#email-template").html();

    var matches = [];
    var pattern = /\[(.*?)\]/g;
    var match;
    while ( (match = pattern.exec(string)) != null )
    {
      matches.push(match[1]);
    }

    // CREATES OBJECT WITH LABELS AND INPUT ID
    var labels = {}
    $('[data-label]').each( function() {
        var labelText = $(this).data('label');
        var inputID = $(this).attr('id');
        labels[labelText] = inputID;
    });

    // REPLACES THE LABEL WITH FIELD ID
    for(var index in matches) {
        
        var string = string.replace('['+ matches[index] +']', '['+matches[index].replace(/[?!.,]/g,"").toLowerCase()+']');
        $("#email-template").html(string);
        
        for(var labelText in labels) {
            var string = string.replace('['+labelText+']', labels[labelText]);
            $("#email-template").html(string);
        }
    }
    
	var overlay = new Overlay("",{
		showOnInit : true,
			entranceAnim : 'fadeInDown',
            size: 'large',
            title: 'Email Template Preview',
            afterOpen: createIframe()
	});
});

function createIframe() {
    setTimeout( function() {
        // Compile HTML Template
        var source = $("#email-template").html();
        var template = Handlebars.compile(source);
        
        // Create iFrame and add values to Template
        $('<iframe>', {
            src: '',
            id:  'frame'
        }).appendTo('.overlayPanelContent');
        
        var iFrame = document.getElementById('frame')
        iFrame.contentDocument.body.innerHTML = template(formData);
        iFrame.height = iFrame.contentWindow.document.body.scrollHeight +...