JSFiddle - React, Tailwind, and code Playground

by joshpauljohnson

HTML

<form>
    <div>
        <input type="text" placeholder="Something To Tolerate"/>
        <input type="submit" value="Tolerate"/>
    </div>
</form>

<div id="out">
    I'll tolerate <span class="x placeholder">SOMETHING</span> but I don't see the value in it.
</div>

CSS

html, body, input {
    font-family: helvetica;
}

form input {
    color: gray;
    font-size: 14pt;
}

#out {
    font-size: 40pt;
    font-weight: bold;
    margin: 50px 0 0 50px;
    text-shadow: 2px 2px #DDDDDD;
}

.x.placeholder {
    color: #B4A8A8;
    text-decoration: italic;
}

JavaScript

$("form").submit(function(e) {
    e.preventDefault();
    var tolerator = $(this).find("input[type=text]").val();
    if (!tolerator) {
        $("#out .x").text("SOMETHING").addClass("placeholder");
    } else {
        $("#out .x").text(tolerator).removeClass("placeholder");
    }
});