Use CSS to create two independent stopwatches in a webpage. Useful for meetings. Credit to thecodeplayer.com

stopwatch.css

* {margin: 0; padding: 0;}

body{
        background: url('fakeexcel.png');
    }

    .container {
            padding: 200px;
            text-align: center;
    }

    .timer {
             padding: 10px;
             background: linear-gradient(top, #222, #444);
             overflow: hidden;
             display: inline-block;
             border: 7px solid #efefef;
             border-radius: 5px;
             position: relative;
                  
             box-shadow: 
             inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
             0 5px 20px -10px rgba(0, 0, 0, 1);
           }

     .cell {
   /* Should only display 1 digit. Hence height = line height of .numbers
     and width = width of .numbers */
             width: 0.60em;
             height: 40px;
             font-size: 50px;
             overflow: hidden;
             position: relative;
             float: left;
           }

     .numbers {
             width: 0.6em;
             line-height: 40px;
             font-family: digital, arial, verdana;
             text-align: center;
             color: #000000;
                                                
             position: absolute;
             top: 0;
             left: 0;
                                                            
             /*Glow to the text*/
             text-shadow: 0 0 5px rgba(255, 255, 255, 1);
            }

            /*Styles for the controls*/
            #timer_controls {
                    margin-top: -5px;
                }
            #timer_controls label {
                    cursor: pointer;
                    padding: 5px 10px;
                    background: #efefef;
                    font-family: arial, verdana, tahoma;
                    font-size: 11px;
                    border-radius: 0 0 3px 3px;
                                   }
                    input[name="controls"] {display: none;}

                    /*Control code*/
                    #stop:checked~.timer .numbers {animation-play-state: paused;}
                    #start:checked~.timer .numbers {animation-play-state: running;}
                    #reset:checked~.timer .numbers {animation: none;}

                    .moveten {
                    animation: moveten 1s steps(10, end) infinite;
                    animation-play-state: paused;
                                 }
    .movesix {
            animation: movesix 1s steps(6, end) infinite;
                animation-play-state: paused;
            }

            /*One second per digit. 10 digits. Hence 10s*/
            .second {animation-duration: 10s;}
            .tensecond {animation-duration: 60s;} /*60 times .second*/

            .milisecond {animation-duration: 1s;} /*1/10th of .second*/
            .tenmilisecond {animation-duration: 0.1s;}
            .hundredmilisecond {animation-duration: 0.01s;}

            .minute {animation-duration: 600s;} /*60 times .second*/
            .tenminute {animation-duration: 3600s;} /*60 times .minute*/

            .hour {animation-duration: 36000s;} /*60 times .minute*/
            .tenhour {animation-duration: 360000s;} /*10 times .hour*/

	@keyframes moveten {
        0% {top: 0;}
            100% {top: -400px;} 
                /*height = 40. digits = 10. hence -400 to move it completely to the top*/
        }

        @keyframes movesix {
                0% {top: 0;}
                    100% {top: -240px;} 
                        /*height = 40. digits = 6. hence -240 to move it completely to the top*/
                }
	/* I was not sure how to handle concurrent timers so I made a duplicate of everthing with a 2 */

    .container2 {	
            padding: 200px;
            text-align: center;
    		}

    .timer2 {
             padding: 10px;
             background: linear-gradient(top, #222, #444);
             overflow: hidden;
             display: inline-block;
             border: 7px solid #efefef;
             border-radius: 5px;
             position: relative;
                  
             box-shadow: 
             inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
             0 5px 20px -10px rgba(0, 0, 0, 1);
           }

     .cell2 {
             width: 0.60em;
             height: 40px;
             font-size: 50px;
             overflow: hidden;
             position: relative;
             float: left;
           }

     .numbers2 {
             width: 0.6em;
             line-height: 40px;
             font-family: digital, arial, verdana;
             text-align: center;
             color: #000000;
                                                
             position: absolute;
             top: 0;
             left: 0;
                                                            
             /*Glow to the text*/
             text-shadow: 0 0 5px rgba(255, 255, 255, 1);
            }

            #timer_controls2 {
                    margin-top: -5px;
                }
            #timer_controls2 label {
                    cursor: pointer;
                    padding: 5px 10px;
                    background: #efefef;
                    font-family: arial, verdana, tahoma;
                    font-size: 11px;
                    border-radius: 0 0 3px 3px;
                                   }
                    input[name="controls2"] {display: none;}

                    /*Control code*/
                    #stop2:checked~.timer2 .numbers2 {animation-play-state: paused;}
                    #start2:checked~.timer2 .numbers2 {animation-play-state: running;}
                    #reset2:checked~.timer2 .numbers2 {animation: none;}

                    .moveten2 {
                    animation: moveten2 1s steps(10, end) infinite;
                    animation-play-state: paused;
                                 }
    	.movesix2 {
            animation: movesix2 1s steps(6, end) infinite;
                animation-play-state: paused;
            }

            .second2 {animation-duration: 10s;}
            .tensecond2 {animation-duration: 60s;} 

            .milisecond2 {animation-duration: 1s;} 
            .tenmilisecond2 {animation-duration: 0.1s;}
            .hundredmilisecond2 {animation-duration: 0.01s;}

            .minute2 {animation-duration: 600s;} 
            .tenminute2 {animation-duration: 3600s;} 

            .hour2 {animation-duration: 36000s;} 
            .tenhour2 {animation-duration: 360000s;} 

	@keyframes moveten2 {
        0% {top: 0;}
            100% {top: -400px;} 
                /*height = 40. digits = 10. hence -400 to move it completely to the top*/
        }

        @keyframes movesix2 {
                0% {top: 0;}
                    100% {top: -240px;} 
                        /*height = 40. digits = 6. hence -240 to move it completely to the top*/
                }

stopwatch.html

<link rel="stylesheet" href="stopwatch.css" type="text/css">
    <div class="container">
            <input id="start" name="controls" type="radio" />
            <input id="stop" name="controls" type="radio" />
            <input id="reset" name="controls" type="radio" />
            <div class="timer">
              <div class="cell">
                <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell">
                <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell divider"><div class="numbers">:</div></div>
                <div class="cell">
                <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
              </div>
                <div class="cell">
                <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell divider"><div class="numbers">:</div></div>
                <div class="cell">
                <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
              </div>
                <div class="cell">
                <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell divider"><div class="numbers">:</div></div>
                <div class="cell">
                <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell">
                    <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>      
                <div class="cell">
                    <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
            </div>
                <div id="timer_controls">
                <label for="start">Start</label>
                <label for="stop">Stop</label>
                <label for="reset">Reset</label>
                </div>
            </div>

            <!-- start here for #2 -->
            <div class="container2">
            <input id="start2" name="controls2" type="radio" />
            <input id="stop2" name="controls2" type="radio" />
            <input id="reset2" name="controls2" type="radio" />
            <div class="timer2">
              <div class="cell2">
                <div class="numbers2 tenhour2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell2">
                <div class="numbers2 hour2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell divider2"><div class="numbers2">:</div></div>
                <div class="cell2">
                <div class="numbers2 tenminute2 movesix2">0 1 2 3 4 5 6</div>
              </div>
                <div class="cell2">
                <div class="numbers2 minute2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell divider2"><div class="numbers2">:</div></div>
                <div class="cell2">
                <div class="numbers2 tensecond2 movesix2">0 1 2 3 4 5 6</div>
              </div>
                <div class="cell2">
                <div class="numbers2 second2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell divider2"><div class="numbers2">:</div></div>
                <div class="cell2">
                <div class="numbers2 milisecond2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
              </div>
                <div class="cell2">
                    <div class="numbers2 tenmilisecond2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
                </div>      
                <div class="cell2">
                    <div class="numbers2 hundredmilisecond2 moveten2">0 1 2 3 4 5 6 7 8 9</div>
                </div>
            </div>
                <div id="timer_controls2">
                <label for="start2">Start</label>
                <label for="stop2">Stop</label>
                <label for="reset2">Reset</label>
                </div>
            </div>

Hi Stedy, Thanks for StopWatch Code, its good.. I need one help to get StopWatch readings. it would be great if you could help to get this. thanks in Advance.
Regards
Suhail