JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

    <head>

	<meta charset="utf-8">


	<title>   .... </title>


        <link rel="stylesheet" href=".....css"/>


	<script src="2.js"> </script>




</head>
  
    <body>

	<from>

		<input type="text" id="songTextInput" size="40" placeholder="Song name">

		<input type="button" id="addButton" value="Add Song">

	</from>

	<ul id="playlist">



	</ul>

</body>

</html>

CSS

body {
    margin:  0 auto;
    padding: 0;
    background-color:  #f2f2f2;
    font-family: Roboto;
  
   min-width: 1200px; 
}






.logo, p {
    font-family: Roboto;
    
    margin: 0 200px 0 0;
}

.logo2 {
    text-align: left;
    margin-left: 200px;
    
}

.pik2 {
    position: absolute;
    background-image: url(imag/03.png); 
    background-repeat: repeat;    
    width: 1200px;
    height: 600px;
    z-index: -3;
    
}

#nomer {
  float: right;
  margin: -100px 0 0 0;  
}


.gla {
    margin: 0 auto;
    position: relative;
    
}


.pic {
    background-image: url(imag/Back.jpg);
    width: 899px;
    height: 431px;
    border-radius: 10px;
    margin: 0 auto;
    
}

#fonb {
    position: absolute;
    display: block;
    border-radius: 17px;
    background-color: #231f20;
    height: 250px;
    width: 700px;
    opacity: 0.9;
    margin:  -27% 0 0 20%;
}

#fonb h1 {
    color: yellow;
    
}


.line1 {
    position: relative;
    text-align: center;
    border-top: solid 1px #ccc;
    top: 1em;
    margin-top: 25px;
}
.line1 h1 {
    background: #f2f2f2;
     position: relative;
    top: -0.65em;
    display: inline;
    margin: 0 ;
    padding: 0 1em 0 1em;
    
}


#conte {
    display: table;
    margin-top: 25px;
    border-spacing: 22px;
    margin: 0 auto;
}


#cell {
    display: table-row;
    
    
    
}

#kran, #manipu, #buld {
    background-repeat: no-repeat;
    border-radius: 8px ;
}


#kran {
    display: table-cell;
    background-image: url(imag/kra.jpg);
    width: 370px;
    height: 253px;
}

.kran12 {
    display: block;
    margin-top: 250px;
    background-color: white;
    height: 55%;
    width: 100%;
    
}
#kran12 p {
    color:darkgray;
    
    
}


#manipu {
    display: table-cell;
    background-image: url(imag/manip.jpg);
    background-color: #fff;
    width: 370px;
    height: 248px;
    


}

.manipu12 {
    display: block;
    margin-top: 250px;
    background-color: white;
    height: 55%;
    width: 100%;
  ...

JavaScript

window.onload = init;   /*JS запускается после того как загрузится страница*/

function init() {         /*init задаём этой функции*/
var button = document.getElementById("addButton"); /*getEleme..дает доступ к существующим элементам*/
button.onclick = handleButtonClick;
}
    
function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    if (songName == "") {
        alert ("введите название песни");
    
    } else {
    
    alert("addig! " + songName );
 
    }

    var li  = document.createElement("li");
    li.innerHTML = songName;
    var ul = document.getElementById("playlist");
    ul.appendChild(li);                                            
}