JSFiddle - React, Tailwind, and code Playground

by pertrai1

HTML

<div class="ux">
    <input id="input" text="text" name="input" placeholder="Type and Press Add Please">
    <br>
    <button type="submit">Add</button>
    <div class="list">
        
    </div>
</div>

CSS

h1 {
    text-align:center;
    font-family:sans-serif;
    font-size:350%;
    color:#282828;
    margin-top:40px;
}
header {
    background: #8fc800;
    width:101.2%;
    height:290px;
    margin-left:-8px;
    margin-top:-10px;
}
.icon {
    margin: 5px auto;
    padding-top:20px;
    background-image: url('List Icons/shopping_icon.png');
    background-repeat: no-repeat;
    width:160px;
    height:160px;
}
.ux {
    background:transparent;
    width:101.2%;
}
#input, #list, .items, button {
    border-radius:8px;
    display:block;
}
#input, #list li {
    font-size:1.45em;
}
#input, .items {
    width:420px;
    height:40px;
    margin:30px auto;
}
#input {
    background: white;
    border:4px solid #8fc800;
    font-family: sans-serif;
    text-align: center;
}
button {
    width:80px;
    height:40px;
    background:#8fc800;
    font-size:20px;
    font-weight: bold;
    position:relative;
    bottom:30px;
}
button, .delete {
    margin:0 auto;
}
.list {
    width:100%;
    height:50px;
    margin-bottom:-25px;
}
.items {
    width:430px;
    background:#4C4C4C;
    color:#fff;
    font-size:2em;
    position:relative;
    bottom:35px;
    text-align: center;
    margin-top:40px;
    display:none;
}
.delete {
    width:60px;
    height:60px;
    background-image: url('List Icons/delete.png');
    background-repeat:no-repeat;
    position:relative;
    left:950px;
    bottom:115px;
    display:none;
}

JavaScript

$(document).ready(function () {

    //entering items to list and clearing text field//
    $("button").on('click', function () {
        var txtval = $('#input').val();
        if (txtval == 0) {
            alert('Please Enter items first');
        } else {
           var list = $(".list");
            list.prepend('<p class="items" style="display:block">' + txtval + '</p>');
            $('#input').val('');
            $('.delete').fadeIn(800);
        }
    });

    //deleting items
    $('.delete').on('click', function () {
        $('.items, .delete').fadeOut(800);
    });

});