JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
<title>Webville Tunes</title>
<meta charset="utf-8">
</head>
<body>

<form>
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="Add Song">
</form>

<ul id="playlist">

</ul>

</body>
</html>

CSS

/* playlist.css */

body {
    font-family: arial, sans-serif;
}

ul#playlist {
    border: 1px solid #a9a9a9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px;
    padding: 0px;
    list-style-type: none;
}

ul#playlist li {
    border-bottom: 1px solid #a9a9a9;
    padding: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
    background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: linear-gradient(#f9f9f9, #e3e3e3);
}

ul#playlist li:last-child {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
ul#playlist li:first-child {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

JavaScript

//Head First HTML5 Ch 3 review

window.onload=function(){
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
    
        
};


function handleButtonClick(){
    var getSong = document.getElementById("songTextInput");
    var theSong = getSong.value;
    alert("song name " + theSong);
    
}