JSFiddle - React, Tailwind, and code Playground

by Jacques Vincilione

HTML

<div class="container">
    <div class="form">
            <div class="rowElem">
                <label for="text">Text:</label>
                <div class="formRight">
                    <input type="text" id="text" name="text" />
                </div>
            </div>
            <div class="rowElem">
                <button class="myBtn" onclick="reverseInputText()">Show reversed text</button>
            </div>
    </div>
</div>
<div class="container" id="result">
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 600');

html, body {
    font-family:"Open Sans", san-serif;
    color:#232323;
    background:#369;
}
.container {
    width:90%;
    max-width:960px;
    padding:30px;
    background:#eee;
    margin:10px auto 0;
}
#result{
    display:none;
}
h1, h2 {
    font-weight:700;
    color:#369;
    margin-top:0;
    width:95%;
    border-bottom:1px solid #cdcdcd;
}
h1{
    font-size:2.2em;
}
.rowElem {
    width:100%;
    line-height:30px;
}
.rowElem label, .formRight {
    float:left;
}
label {
    width:10%;
    margin-right:2%;
}
.formRight {
    width:87%;
}
.formRight input {
    padding:5px;
    width:90%;
}
.myBtn {
    padding:10px 15px;
    background:#3276b1;
    color:#fff;
    border:none;
}
.myBtn:hover {
    background:#2d6a9f;
}

@media screen and (max-width: 550px){
    label, .formRight{
        width:100%;
}

JavaScript

var reverseInputText = function() {
    var textArray = $('#text').val().split(''),
        result = [],
        i;
    
    for(i=0; i < textArray.length; i++) {
        result.unshift(textArray[i]);
    }
    
    result = result.join('');
    
    $('#result').empty().append(result);
}