Flip clock

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
   <style>
       body { background-color: #abe9cd; background-image: linear-gradient(315deg, #abe9cd 0%, #3eadcf 74%); }
       .clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
   </style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
   <script>
       var clock = $('.timer').FlipClock({
           clockFace: 'TwelveHourClock',
       })
   </script>