JSFiddle - React, Tailwind, and code Playground

by CodeMaverick

HTML

<div id="content-box"></div>
<div id="control-box">
    <br />
    Time to fade in:
    <input id="time-to-fade-in" type="text" value="1000" /> (in milliseconds)
    <br /><br />
    Time to fade out:
    <input id="time-to-fade-out" type="text" value="1000" /> (in milliseconds)
    <br /><br />
    <button id="run-effect">Run Effect</button>
</div>

CSS

.newobj-hilite {
    background: #ff0;
}

.button { 
    display: block; }

input[type=text] {
    width: 50px;
    margin: 0px 5px;
}

JavaScript

var $contentBox = $("#content-box"),
    TIME_TO_FADE_IN = 0,
    TIME_TO_FADE_OUT = 0;

$('#run-effect').click(function() {

    TIME_TO_FADE_IN = parseInt($("#time-to-fade-in").val()),
    TIME_TO_FADE_OUT = parseInt($("#time-to-fade-out").val());
    
    console.log("Time to fade in: " + TIME_TO_FADE_IN);
    console.log("Time to fade out: " + TIME_TO_FADE_OUT);
    
    $("<p>New content.</p>")
        .appendTo($contentBox)
        .addClass('newobj-hilite', TIME_TO_FADE_IN, function() {
            $(this).removeClass('newobj-hilite', TIME_TO_FADE_OUT);
        });
        
});