JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id='top'>Kitchen List</div>
<br />
<div class="container">
<input type='text' id='input'><button id='click'>Add</button>
<ol>
    
</ol>
    <div id='error'>Please enter a grocery item<br /><button id='eb'>Close</button></div>
    
    </div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #252525;
    color: #96f226
}
.container {
    margin-top: 50px;
}
#top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: relative;
    position: fixed;
}
#input {
    background: #4a4a4a;
    border: 1px solid #454545;
    color: #96f226;
}
#input:hover {
    background: #656565;
}
#input:focus {
    box-shadow: 0 0 30px #96f226
}
#click {
    background: #4a4a4a;
    border: 1px solid #454545;
    border-radius: 0;
    color: #96f226;
    cursor: pointer;
}
#click:hover {
    background: #656565;
}
#click:active {
    box-shadow: 0 0 30px #96f226;
}
#error {
    height: 55px;
    width: 100%;
    background: red;
    text-align: center;
    font-size: 23px;
    color: orange;
}
#eb {
    background: orange;
    color: red;
    border-radius: 0;
    border: 0;
    cursor: pointer
}
#eb:hover {
    background: #e59400;
}
#eb:active {
    box-shadow: 0 0 30px #e59400;
}
#check {
    width: 15px;
    height: 15px;
    background: #4a4a4a;
    cursor: pointer
}
#check:hover {
    background: #656565;
}
#check:active {
    box-shadow: 0 0 30px #96f226
}
#check.active {
    background: #96f226
}

JavaScript

$(document).ready(function(){
    $('#body').jScrollPane({showArrows: true});
    $('#error').hide();
    $('#click').click(function(){
        var i = $('#input').val();
        if (i !== "") {
            $('ol').prepend('<div id="check" style="display:inline-block"></div> <div style="display:inline-block">' + i + '</div><br /><br />');
            $('#check').click(function(){
                $(this).toggleClass('active');
            });
        }
        else {
            $('#error').show();
            $('#eb').click(function(){
                $('#error').hide();
            });
        }
    });
});