JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="tree">
            <div id="tree-body">
                <div class="item-7"></div>
                <div class="item-6"></div>
                <div class="tree-item item-5"></div>
                <div class="tree-item item-4"></div>
                <div class="tree-item item-3"></div>
                <div class="tree-item item-2"></div>
                <div class="tree-item item-1"></div>
                <div class="tree-leg"></div>
            </div>
            
            <div id="lights">
                <div class="lights-item item-1">
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div>
                 </div>
                <div class="lights-item item-2">
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                </div>
                <div class="lights-item item-3">
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                </div>
                <div class="lights-item item-4">
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div><div></div>
                    <div></div>
                </div>
                <div class="lights-item item-5">
                    <div></div><div></div>
                    <div></div><div></div>
                   ...

CSS

body {
background: #104370;
}

#container {
width: 1000px;
height: 800px;
margin: -5px auto;
position: relative;
}

/*--- TREE ---*/

#tree{
width: 350px;
height: 500px;
border: 0px solid red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -250px;
z-index: 9;
}

#tree-body div{
background: ivory;
width: auto;
border: 1px solid red;
height: 2px;
border-left: 60px solid #104370;
border-right: 60px solid #104370;
border-bottom: 60px solid ivory;
border-top: 0px solid transparent;
margin: 0px auto;
}

#tree-body div.tree-leg{
border: 0px;
width: 100px;
height: 35px;
}

#tree-body .item-1{
border-bottom-width: 80px;
}

#tree-body .item-2{
width: 190px;
border-bottom-width: 75px;
}

#tree-body .item-3{
width: 160px;
border-bottom-width: 70px;
border-left-width: 55px;
border-right-width: 55px;
}

#tree-body .item-4{
width: 130px;
border-left-width: 50px;
border-right-width: 50px;
}

#tree-body .item-5{
width: 90px;
border-left-width: 45px;
border-right-width: 45px;
}

#tree-body .item-6{
width: 50px;
border-bottom-width: 50px;
border-left-width: 40px;
border-right-width: 40px;
}

#tree-body .item-7{
width: 1px;
border-bottom-width: 50px;
border-left-width: 40px;
border-right-width: 40px;
}


/*--- LIGHTS ---*/

#lights{
position: absolute;
top: 0px;
width: 350px;
}

.lights-item{
border: 0px solid red;
height: 18px;
position: relative;
margin: 0px auto;
overflow: hidden;
}

.lights-item div{
border: 0px solid red;
width: 10px;
height: 10px;
float: left;
border-radius: 50%;
margin-top: 0px;
background: ivory;
border: 0px solid ivory;
-webkit-animation: light 15s linear infinite;
-moz-animation: light 15s linear infinite;
-ms-animation: light 15s linear infinite;
-webkit-animation: light 15s linear infinite;
}

#lights .item-1{
width: 90px;
top: 47px;
border: 0px solid red;
}

#lights .item-2{
width: 145px;
top: 80px;
height: 20px;
}

#lights .item-2 div{
width: 12px;
height: 12px;
}

#lights .item-3{
width: 195px;
height: 30px;
top:...