I implemented a countdown in my Laravel 5 application and I wish to change the font weight of its text. For some reason this simple task is taking me a lot of time to figure out. If the color is set to #fff the font-weight is correctly applied. If I change the color, the fon't weight stops working.

Images for comparison:

blade.php file

<a style="color: #fff" href="">
  <div id="countdown-component" style="display:inline;color:#EC1B33;font-weight:600;letter-spacing:2px;">
  </div>
</a>

JS function to generate the countdown:

<script>
      // Set the date we're counting down to
      var countDownDate = new Date("Feb 15, 2022 12:00:00").getTime();
    
      // Update the count down every 1 second
      var x = setInterval(function() {
    
      // Get today's date and time
      var now = new Date().getTime();
    
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
    
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
      // Display the result in the element with id="demo"
      document.getElementById("countdown-component").innerHTML = days + " DAYS " + hours + " HOURS "
      + minutes + " MINUTES " + seconds + " SECONDS ";
    
      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown-component").innerHTML = "EXPIRED";
      }
    }, 1000);
</script>

Thanks in advance.