JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div id="div1">
    <ul id="ul1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
    <button id="addButton">Add number</button>
</div>

CSS

#div1{
    border: 1px dashed red;
    padding: 5px;
}
h1{
    color: navy;
    font-family: sans serif;
    font-size:24px;
    border-bottom: 1px solid navy;
}
li{
    margin: 5px;
}
li:before{   
    content: "{";
}
li:after{
    content: "}";
}
li:nth-child(odd){
    background-color:skyblue;
}

li:hover{
    background-color:yellowgreen;
}

JavaScript

var n = document.createElement("h1");
n.textContent = "Hello, DOM!"
div1.parentNode.insertBefore(n, div1);
var mh = document.createElement("h1");
mh.textContent = "Numbers";
ul1.insertBefore(mh, ul1.firstChild);
addButton.addEventListener("click", function(e) {
    alert(this);
});