JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sapka"><div id="sapka">
    <div class="current-submenu">
    <div id="unnep_keret"><div id="unnep"></div></div>
  <center><hr width="99%" color="#000" size="20"> </hr></center>
</div></br></br>

CSS

/*  */
#sapka{width:100%;
     font-family:sans-serif;font-size:14px;color:#111F10;text-align:center;}
.current-submenu{width:800px;font-weight:700;height:345px;text-align:center;margin:0 auto;padding:4px 0 0 0;
	               font-size:16px;;border:0 solid #c6ac6c;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;
                 background: #E1DFD5;font-family:Insula, Arial, helvetica, sans-serif;
                 background-image:-webkit-linear-gradient(left,#938B66, #E1DFD5, #938B66);
                 background-image:-moz-linear-gradient(left,#938B66, #E1DFD5, #938B66);
                 background-image:-o-linear-gradient(top left,#938B66, #E1DFD5 50%,#938B66 100%);
                 -pie-background:linear-gradient(left, #938B66, #E1DFD5, #938B66);
                 behavior:url('infusions/nevunep_panel/pie.htc');z-index:2;}
#unnep_keret{width:800px;min-height:15px;height:auto;margin:0 auto;padding:0;position:relative;}
#unnep{width:800px;margin:0;padding:0;position:absolute;left:0;top:0;   background: url('infusions/nevunep_panel/orange50.png') 0 0 repeat;
       -moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;
       border-radius:8px;border:0px solid blue;behavior:url('infusions/nevunep_panel/pie.htc');}
#unnep div{width:797px;margin:0 auto;padding:0;color:#FFFFFF;font-family:Insula, Arial, helvetica, sans-serif;
       height:30px;line-height:30px;font-size:18px;background: url('infusions/nevunep_panel/unnep.gif') 0 0 repeat;
       -moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;
       border-radius:8px;border:0px solid gray;behavior:url('infusions/nevunep_panel/pie.htc');}

JavaScript

/************** ÜNNEPEK ***************/
function unnepek()
{
var unnep_idoszak = false;
  var today = new Date();
  var theoccasion1 = new Date(parseInt(today.getFullYear()), 12, 25);
  var mikulas_nap = new Date(parseInt(today.getFullYear()), 12, 6);
  if(parseInt(today.getMonth())==11) 
  {
    var theoccasion2 = new Date(parseInt(today.getFullYear()+1), 1, 1);
    var theoccasion3 = new Date(parseInt(today.getFullYear()+1), 1, 8);
  }
  else
  {
    var theoccasion2 = new Date(parseInt(today.getFullYear()), 1, 1);
    var theoccasion3 = new Date(parseInt(today.getFullYear()), 1, 8);
  }
  mikulas_nap.setMonth(theoccasion1.getMonth()-1);
  theoccasion1.setMonth(theoccasion1.getMonth()-1);
  theoccasion2.setMonth(theoccasion2.getMonth()-1);
  theoccasion3.setMonth(theoccasion3.getMonth()-1);

  var one_day = 1000*60*60*24;
  calculate_mikulas_nap = Math.ceil((parseInt(mikulas_nap.getTime())-parseInt(today.getTime()))/(one_day));
  calculatediff1 = Math.ceil((parseInt(theoccasion1.getTime())-parseInt(today.getTime()))/(one_day));
  calculatediff2 = Math.ceil((parseInt(theoccasion2.getTime())-parseInt(today.getTime()))/(one_day));
  calculatediff3 = Math.ceil((parseInt(theoccasion3.getTime())-parseInt(today.getTime()))/(one_day));
  if (calculate_mikulas_nap < 0)
  {
    var nextyeartoday=new Date();
    nextyeartoday.setFullYear(today.getFullYear()+1);
    calculate_mikulas_nap = Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculate_mikulas_nap);
  }
  if (calculatediff1 < 0)
  {
    var nextyeartoday=new Date();
    nextyeartoday.setFullYear(today.getFullYear()+1);
    calculatediff1 = Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff1);
  }
  if (calculatediff2 < 0)
  {
    var nextyeartoday=new Date();
    nextyeartoday.setFullYear(today.getFullYear()+1);
    calculatediff2 = Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff2);
  }
  if (calculatediff3 < 0)
  {
    var nextyeartoday=new...