<div id="root"></div>

html
   background-color: #4472C4  //4472C4 59D7FA
   // background: linear-gradient(to right, #7f00ff, #e100ff)
   // padding: 70px
#root
   font-family: 'Fjalla One', sans-serif
   
#calendar
   background-color: #ed7057
   width: 200px
   height: 300px
   padding: 20px
   margin: 0 auto
   margin-top: 50px
   box-shadow: 8px 8px 0.01px #444444
   border-radius: 3px
   border-top: 25px solid #355999
   color: white
   
#day
   width: 100px
   // background-color: #fff
   padding: 10px 25%
   color: #525151
   text-align: center
   color: white
   
#weekday
   margin: -25px 25% 30px 25%
   color:  white    //#525151
   text-align: center
// #month
//    width: 100px
//    color: #525151
//    // background-color: #000
   
#date
   width: 150px
   height: 120px
   font-size: 80px
   background-color: #F4F6F5
   box-shadow: 2px 2px 5px #444444
   color: #525151
   border-radius: 5px
   margin: 0 auto
   text-align: center
   padding-top: 30px

#time_now
   color: #525151
   border-radius: 5px
   font-size: 20px
   padding: 10px
   margin-top: -30px
   // background-color: #E4E1E1
   // color: #9A9A9B
   text-align: center
   
h1   
   font-size: 50px
   font-weight: 700
   color: white
   text-align: center

function tick(){
        var week = new Array("Sunday","Monday","Tuesday","Wednesday",
                                    "Thursday","Friday","Saturday")
        const element = (
          <div>
             <h1>Cherish EVERY MOMENT!</h1>
             <div id="calendar">
                <h3 id="date">{new Date().getDate()}</h3>
                <h2 id="day">{new Date().getFullYear()} / {new Date().getMonth()+1}</h2>
                <h2 id="weekday">{week[new Date().getDay()]}</h2>
                <h2 id="time_now">{new Date().toLocaleTimeString().split("上午")}</h2>
                </div>
          </div>
        )



          ReactDOM.render(
            element,
            document.getElementById('root')
          );
        }
setInterval(tick, 1000);