JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="bg">
            <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>
            <div></div><div></div>
            <div></div><div></div>
        </div>
        
        <div id="snow">
            <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>
            <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>
            <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 id="balls">
            <div class="balls-item item-1">
                <div class="line"></div>
                <div class="decor">
                    <div class="decor-line"></div>
                </div>
                <div class="ball"></div>
            </div>
            <div class="balls-item item-2">
                <div class="line"></div>
                <div class="decor">
                    <div class="decor-line"></div>
                </div>
                <div class="ball"></div>
            </div>
            <div class="balls-item item-3">
                <div class="line"></div>
                <div class="decor">
                    <div class="decor-line"></div>
                </div>
                <div class="ball"></div>
            </div>
        </div>
        
        
        <div id="text">
            <h2>C новым...

CSS

body {
 background: #104370;
} 

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

/*--- SNOW ---*/

#snow{
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
overflow: hidden;
}

#snow div{
width: 7px;
height: 7px;
background: ivory;
border-radius: 50%;
position: absolute;
}

/*--- BALLS ---*/

#balls{
border: 0px solid red;
height: 100%;
position: relative;
margin: 0px auto;
min-width: 550px;
max-width: 950px;
overflow: hidden;
}

.balls-item{
border: 0px solid green;
position: absolute;
top: 0px;
}

.item-1{
left: 4%;
width: 300px;
z-index: 9;
}

.item-2{
right: 4%;
width: 350px;
z-index: 10;
}

.item-3{
width: 220px;
left: 50%;
margin-left: -125px;
}

.line{
position: relative;
z-index: 10;
width: auto;
left: 50%;
height: 290px;
border-left: 3px dotted ivory;
}

.item-2 .line{
height: 400px;
border-left: 5px dotted ivory;
}

.item-3 .line{
height: 110px;
border-left: 1px dotted ivory;
}

.decor{
position: relative;
width: 17%;
margin: 0px auto;
border-top: 0px solid ivory;
z-index: 12;
height: 30px;
}

.decor:before{
content: " ";
display: block;
height: 25px;
background: ivory;
border-radius: 50% 50% 0px 0px ;
}

.item-2 .decor{
height: 32px;
}

.item-2 .decor:before{
height: 30px;
}

.item-3 .decor{
height: 26px;
}

.item-3 .decor:before{
height: 20px;
}

.decor-line,
.decor-line:before,
.decor-line:after{
width: 33.5%;
height: 10px;
background: ivory;
border-radius: 0px 0px 50% 50%;
border: 0px solid red;
position: relative;
}

.decor-line:before,
.decor-line:after{
content: " ";
display: block;
border: 0px solid red;
width: 100%;
position: absolute;
}

.decor-line{
margin: 0px auto;
}

.decor-line:before{
left: -100%;
}

.decor-line:after{
left: 100%;
}

.ball{
width: 300px;
height: 300px;
position: relative;
background: #b7c6c9;
border-radius: 50%;
box-shadow: 0px 0px 15px rgba(16,67,112,0.5);
}

.item-2 .ball{
width: 350px;
height: 350px;
}

.item-3 .ball{
width: 220px;
height:...