JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="emailOut" class="section action">
     <h1>SEND EMAIL</h1>

    <div id="emailContainer">
        <label>Select Template</label>
        <br />
        <select class="tempSelect">
            <option>Template 1</option>
            <option>Template 2</option>
            <option>Template 3</option>
        </select><br />
        <div class="activeEmail"></div>
    </div>
</div>

<div id="template1" class="ii gt m13fd3bb2e7b056ec adP adO">
    <div id=":1po" style="overflow: hidden;">
        <div class="adM"></div><u></u>

        <div bgcolor="#ffffff" text="#000000" link="#0a328c" style="margin:0;padding:0">	<a name="13fd3bb2e7b056ec_nltop"></a>

            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
                <tbody>
                    <tr valign="top">
                        <td align="center" bgcolor="#004494" style="background-color:#004494">
                            <table width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px">
                                <tbody>
                                    <tr>
                                        <td style="border-collapse:collapse" align="left">
                                            <table cellpadding="0" cellspacing="0" border="0">
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <img src="http://www.img-source.de/img/2013/BKM/US/06/A2608_MVUS1307HN63/spacer.png" width="1" height="23" style="display:block;width:1px;min-height:23px;border:0" alt="" border="0">
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <table...

CSS

#emailOut {
    margin: 20px;
    border: solid 1px #000;
    min-height: 25px;
}
.section h1 {
    font-size: 14px;
    background: #e5e5e5;
    margin: 0px;
    padding: 4px;
    font-family: arial;
}
#emailContainer {
    display:none;
    border-top: solid 1px #000;
    min-height: 200px;
    padding: 10px;
}

#template1, #template2, #template3 {
    zoom: 35%;
    width: 900px;
}

JavaScript

var template1 = $('#template1').detach();
var template2 = $('#template2').detach();
var template3 = $('#template3').detach();


$('.section h1').click(function () {
    $('#emailContainer').slideToggle(200);
});

$('.tempSelect').change(function () {
    template = $(this).val();
    if (template == 'Template 1') {
        $('.activeEmail').html(template1);
    } else if (template == 'Template 2') {
        $('.activeEmail').html(template2);
    } else if (template == 'Template 3') {
        $('.activeEmail').html(template3);
    }
});