Coming Soon Style 2

HTML

<section class="clock-section">
        <div class="container-clock">
            <div class="clock-row">
                <div class="clock-col">
                    <div class="clock-body" id="clock-body">

                        <div class="clock"></div>
                
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

.clock {
  width: fit-content;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#clock-body span.flip-clock-label {
  font-family: 'Roboto';
  font-size: 20px;
  right: -97px;
}
.clock-body {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-content: center;
}

@media(max-width: 480px){
  .clock{
    width: 700px;
    left: 2.5%;
    transform: scale(0.55);
  }
}

JS

jQuery(document).ready(function(){

    $(document).ready(function() {
	let clock;
  
	// Grab the current date
	let currentDate = new Date();
  
	// Target future date/24 hour time/Timezone "Add time and location here", YYYY-MM-DD, Country/City
	let targetDate = moment.tz("2025-01-01", "India/Mumbai");
  
	// Calculate the difference in seconds between the future and current date
	let diff = targetDate / 1000 - currentDate.getTime() / 1000;
  
	if (diff <= 0) {
	  // If remaining countdown is 0
	  clock = $(".clock").FlipClock(0, {
		clockFace: "DailyCounter",
		countdown: true,
		autostart: false
	  });
	  console.log("Date has already passed!")
	  
	} else {
	  // Run countdown timer
	  clock = $(".clock").FlipClock(diff, {
		clockFace: "DailyCounter",
		countdown: true,
		callbacks: {
		  stop: function() {
			console.log("Timer has ended!")
		  }
		}
	  });
	  
	  // Check when timer reaches 0, then stop at 0
	  setTimeout(function() {
		checktime();
	  }, 1000);
	  
	  function checktime() {
		t = clock.getTime();
		if (t <= 0) {
		  clock.setTime(0);
		}
		setTimeout(function() {
		  checktime();
		}, 1000);
	  }
	}
  });
  

});

Links

     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">

Scripts

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  
    <script src="https://momentjs.com/downloads/moment.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>