JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<br />
<textarea id='type'></textarea>
<br />
<br />
<input id='input'>
<br />
<br />
<button id='b'><span class='glyphicon glyphicon-plus'></span>

</button>
<ul id='ul'></ul>

CSS

#type, #input {
    border-radius: 10px;
    background: #dadae3;
    color: #73318e;
    border: 1px solid #dadae3;
}
#type {
    border-bottom-right-radius: 0;
}
#type:hover, #input:hover {
    background: #c4c4cc;
    color: #371e41;
    border: 1px solid #c4c4cc;
}
#type:hover::-webkit-input-placeholder {
    color: #371e41
}
#input:hover::-webkit-input-placeholder {
    color: #371e41
}
#type:focus, #input:focus {
    outline: 0;
}
button {
    height: 25px;
    background: #dadae3;
    border-radius: 10px;
    border: 1px solid #dadae3;
    color: #73318e;
    cursor: pointer;
}
button:hover {
    background: #c4c4cc;
    color: #371e41;
    border: 1px solid #c4c4cc;
}
button:focus {
    outline: 0;
}

JavaScript

var postedTime;
$('#b').click(function () {
    var v = $('#type').val();
    var u = $('#input').val();
    if (v !== "" && u !== "") {
        var time = new Date();
        var currentime = Date.now();
        var x = currentime - time;
        postedTime = currentime;
        $("ul").prepend("<li>" + v + "<br />Posted by " + u + " <span class='time'>" + x + "</span> minutes ago  </li>");
        window.setInterval( function () {
            var newTime = new Date(new Date() - postedTime);
            $(".time").html(newTime.getMinutes());            
        }, 1000);
        $('#type, #input').css('border', '');
    } else if (v == "" && u == "") {
        $('#type, #input').css('border', '1px solid red');
    } else if (v == "") {
        $('#type').css('border', '1px solid red');
        $('#input').css('border', '');
    } else {
        $('#input').css('border', '1px solid red');
        $('#type').css('border', '');
    }
});