Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="clock  is-showing-minutes  is-showing-seconds">
    <div class="clock__row  clock__row--1">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
    </div>
  
    <div class="clock__row  clock__row--2">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
        <span class="clock__dot  clock__dot--6"></span>
        <span class="clock__dot  clock__dot--7"></span>
    </div>
  
    <div class="clock__row  clock__row--3">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
        <span class="clock__dot  clock__dot--6"></span>
        <span class="clock__dot  clock__dot--7"></span>
    </div>
  
    <div class="clock__row  clock__row--4">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
        <span class="clock__dot  clock__dot--6"></span>
        <span class="clock__dot  clock__dot--7"></span>
    </div>
  
    <div class="clock__row  clock__row--5">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
        <span class="clock__dot  clock__dot--6"></span>
        <span class="clock__dot  clock__dot--7"></span>
    </div>
  
    <div class="clock__row  clock__row--6">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
        <span class="clock__dot  clock__dot--6"></span>
        <span class="clock__dot  clock__dot--7"></span>
    </div>

    <div class="clock__row  clock__row--7">
        <span class="clock__dot  clock__dot--1"></span>
        <span class="clock__dot  clock__dot--2"></span>
        <span class="clock__dot  clock__dot--3"></span>
        <span class="clock__dot  clock__dot--4"></span>
        <span class="clock__dot  clock__dot--5"></span>
    </div>
</div>
              
            
!

CSS

              
                /* ==========================================================================
   Base
   ========================================================================== */

html {
    padding-top: 100px;
    font-size: 10px;
    text-align: center;
    background-color: #2d2d2d;
}

@media (min-width: 30em) {html { font-size: 15px; }}
@media (min-width: 60em) {html { font-size: 20px; }}






/* ==========================================================================
   Clock dots
   ========================================================================== */

.clock__dot {
    margin: 0.75em;
    border: 0.5em solid;
    border-radius: 50%;
    display: inline-block;
}






/* ==========================================================================
   Hours
   ========================================================================== */

/* Center dot
   -------------------------------------------------------------------------- */

.clock .clock__row--4 .clock__dot--4,



/* 24 hours
   -------------------------------------------------------------------------- */

.clock[data-time*="00-"] .clock__row--1 .clock__dot--3,
.clock[data-time*="00-"] .clock__row--2 .clock__dot--4,
.clock[data-time*="00-"] .clock__row--3 .clock__dot--4,

.clock[data-time*="12-"] .clock__row--1 .clock__dot--3,
.clock[data-time*="12-"] .clock__row--2 .clock__dot--4,
.clock[data-time*="12-"] .clock__row--3 .clock__dot--4,

.clock[data-time*="01-"] .clock__row--1 .clock__dot--5,
.clock[data-time*="01-"] .clock__row--2 .clock__dot--5,
.clock[data-time*="01-"] .clock__row--3 .clock__dot--5,

.clock[data-time*="13-"] .clock__row--1 .clock__dot--5,
.clock[data-time*="13-"] .clock__row--2 .clock__dot--5,
.clock[data-time*="13-"] .clock__row--3 .clock__dot--5,

.clock[data-time*="02-"] .clock__row--2 .clock__dot--7,
.clock[data-time*="02-"] .clock__row--3 .clock__dot--6,
.clock[data-time*="02-"] .clock__row--3 .clock__dot--5,

.clock[data-time*="14-"] .clock__row--2 .clock__dot--7,
.clock[data-time*="14-"] .clock__row--3 .clock__dot--6,
.clock[data-time*="14-"] .clock__row--3 .clock__dot--5,

.clock[data-time*="03-"] .clock__row--4 .clock__dot--7,
.clock[data-time*="03-"] .clock__row--4 .clock__dot--6,
.clock[data-time*="03-"] .clock__row--4 .clock__dot--5,

.clock[data-time*="15-"] .clock__row--4 .clock__dot--7,
.clock[data-time*="15-"] .clock__row--4 .clock__dot--6,
.clock[data-time*="15-"] .clock__row--4 .clock__dot--5,

.clock[data-time*="04-"] .clock__row--5 .clock__dot--5,
.clock[data-time*="04-"] .clock__row--5 .clock__dot--6,
.clock[data-time*="04-"] .clock__row--6 .clock__dot--7,

.clock[data-time*="16-"] .clock__row--5 .clock__dot--5,
.clock[data-time*="16-"] .clock__row--5 .clock__dot--6,
.clock[data-time*="16-"] .clock__row--6 .clock__dot--7,

.clock[data-time*="05-"] .clock__row--5 .clock__dot--5,
.clock[data-time*="05-"] .clock__row--6 .clock__dot--5,
.clock[data-time*="05-"] .clock__row--7 .clock__dot--5,

.clock[data-time*="17-"] .clock__row--5 .clock__dot--5,
.clock[data-time*="17-"] .clock__row--6 .clock__dot--5,
.clock[data-time*="17-"] .clock__row--7 .clock__dot--5,

.clock[data-time*="06-"] .clock__row--5 .clock__dot--4,
.clock[data-time*="06-"] .clock__row--6 .clock__dot--4,
.clock[data-time*="06-"] .clock__row--7 .clock__dot--3,

.clock[data-time*="18-"] .clock__row--5 .clock__dot--4,
.clock[data-time*="18-"] .clock__row--6 .clock__dot--4,
.clock[data-time*="18-"] .clock__row--7 .clock__dot--3,

.clock[data-time*="07-"] .clock__row--5 .clock__dot--3,
.clock[data-time*="07-"] .clock__row--6 .clock__dot--3,
.clock[data-time*="07-"] .clock__row--7 .clock__dot--1,

.clock[data-time*="19-"] .clock__row--5 .clock__dot--3,
.clock[data-time*="19-"] .clock__row--6 .clock__dot--3,
.clock[data-time*="19-"] .clock__row--7 .clock__dot--1,

.clock[data-time*="08-"] .clock__row--5 .clock__dot--3,
.clock[data-time*="08-"] .clock__row--5 .clock__dot--2,
.clock[data-time*="08-"] .clock__row--6 .clock__dot--1,

.clock[data-time*="20-"] .clock__row--5 .clock__dot--3,
.clock[data-time*="20-"] .clock__row--5 .clock__dot--2,
.clock[data-time*="20-"] .clock__row--6 .clock__dot--1,

.clock[data-time*="09-"] .clock__row--4 .clock__dot--1,
.clock[data-time*="09-"] .clock__row--4 .clock__dot--2,
.clock[data-time*="09-"] .clock__row--4 .clock__dot--3,

.clock[data-time*="21-"] .clock__row--4 .clock__dot--1,
.clock[data-time*="21-"] .clock__row--4 .clock__dot--2,
.clock[data-time*="21-"] .clock__row--4 .clock__dot--3,

.clock[data-time*="10-"] .clock__row--3 .clock__dot--3,
.clock[data-time*="10-"] .clock__row--3 .clock__dot--2,
.clock[data-time*="10-"] .clock__row--2 .clock__dot--1,

.clock[data-time*="22-"] .clock__row--3 .clock__dot--3,
.clock[data-time*="22-"] .clock__row--3 .clock__dot--2,
.clock[data-time*="22-"] .clock__row--2 .clock__dot--1,

.clock[data-time*="11-"] .clock__row--3 .clock__dot--3,
.clock[data-time*="11-"] .clock__row--2 .clock__dot--3,
.clock[data-time*="11-"] .clock__row--1 .clock__dot--1,

.clock[data-time*="23-"] .clock__row--3 .clock__dot--3,
.clock[data-time*="23-"] .clock__row--2 .clock__dot--3,
.clock[data-time*="23-"] .clock__row--1 .clock__dot--1 {
    color: lime;
    box-shadow: 0 0 6px;
}






/* ==========================================================================
   Minutes and seconds
   ========================================================================== */

/* Center dot for x0, x5
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-00"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-05"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-10"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-15"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-20"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-25"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-30"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-35"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-40"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-45"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-50"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-55"] .clock__row--4 .clock__dot--4,



/* Minutes for x0, x5
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-00"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-00"] .clock__row--2 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-00"] .clock__row--3 .clock__dot--4,

.clock.is-showing-minutes[data-time*="-05"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-05"] .clock__row--2 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-05"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-10"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-10"] .clock__row--3 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-10"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-15"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-15"] .clock__row--4 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-15"] .clock__row--4 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-20"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-20"] .clock__row--5 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-20"] .clock__row--6 .clock__dot--7,

.clock.is-showing-minutes[data-time*="-25"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-25"] .clock__row--6 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-25"] .clock__row--7 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-30"] .clock__row--5 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-30"] .clock__row--6 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-30"] .clock__row--7 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-35"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-35"] .clock__row--6 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-35"] .clock__row--7 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-40"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-40"] .clock__row--5 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-40"] .clock__row--6 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-45"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes[data-time*="-45"] .clock__row--4 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-45"] .clock__row--4 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-50"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-50"] .clock__row--3 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-50"] .clock__row--2 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-55"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-55"] .clock__row--2 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-55"] .clock__row--1 .clock__dot--1,



/* Seconds for x0, x5
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes.is-showing-seconds[data-time*="_00"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_05"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_10"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_15"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_20"] .clock__row--6 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_25"] .clock__row--7 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_30"] .clock__row--7 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_35"] .clock__row--7 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_40"] .clock__row--6 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_45"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_50"] .clock__row--2 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_55"] .clock__row--1 .clock__dot--1 {
    color: yellow;
    box-shadow: 0 0 6px;
}



/* Center dot for x1, x6
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-01"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-06"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-11"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-16"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-21"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-26"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-31"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-36"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-41"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-46"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-51"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-56"] .clock__row--4 .clock__dot--4,



/* Minutes for x1, x6
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-01"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-01"] .clock__row--2 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-01"] .clock__row--3 .clock__dot--4,

.clock.is-showing-minutes[data-time*="-06"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-06"] .clock__row--2 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-06"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-11"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-11"] .clock__row--3 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-11"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-16"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-16"] .clock__row--4 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-16"] .clock__row--4 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-21"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-21"] .clock__row--5 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-21"] .clock__row--6 .clock__dot--7,

.clock.is-showing-minutes[data-time*="-26"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-26"] .clock__row--6 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-26"] .clock__row--7 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-31"] .clock__row--5 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-31"] .clock__row--6 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-31"] .clock__row--7 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-36"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-36"] .clock__row--6 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-36"] .clock__row--7 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-41"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-41"] .clock__row--5 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-41"] .clock__row--6 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-46"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes[data-time*="-46"] .clock__row--4 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-46"] .clock__row--4 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-51"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-51"] .clock__row--3 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-51"] .clock__row--2 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-56"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-56"] .clock__row--2 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-56"] .clock__row--1 .clock__dot--1,



/* Seconds for x1, x6
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes.is-showing-seconds[data-time*="_01"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_06"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_11"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_16"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_21"] .clock__row--6 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_26"] .clock__row--7 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_31"] .clock__row--7 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_36"] .clock__row--7 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_41"] .clock__row--6 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_46"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_51"] .clock__row--2 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_56"] .clock__row--1 .clock__dot--1 {
    color: gold;
    box-shadow: 0 0 6px;
}



/* Center dot for x2, x7
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-02"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-07"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-12"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-17"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-22"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-27"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-32"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-37"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-42"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-47"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-52"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-57"] .clock__row--4 .clock__dot--4,



/* Minutes for x2, x7
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-02"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-02"] .clock__row--2 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-02"] .clock__row--3 .clock__dot--4,

.clock.is-showing-minutes[data-time*="-07"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-07"] .clock__row--2 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-07"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-12"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-12"] .clock__row--3 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-12"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-17"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-17"] .clock__row--4 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-17"] .clock__row--4 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-22"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-22"] .clock__row--5 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-22"] .clock__row--6 .clock__dot--7,

.clock.is-showing-minutes[data-time*="-27"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-27"] .clock__row--6 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-27"] .clock__row--7 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-32"] .clock__row--5 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-32"] .clock__row--6 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-32"] .clock__row--7 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-37"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-37"] .clock__row--6 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-37"] .clock__row--7 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-42"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-42"] .clock__row--5 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-42"] .clock__row--6 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-47"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes[data-time*="-47"] .clock__row--4 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-47"] .clock__row--4 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-52"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-52"] .clock__row--3 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-52"] .clock__row--2 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-57"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-57"] .clock__row--2 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-57"] .clock__row--1 .clock__dot--1,



/* Seconds for x2, x7
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes.is-showing-seconds[data-time*="_02"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_07"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_12"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_17"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_22"] .clock__row--6 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_27"] .clock__row--7 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_32"] .clock__row--7 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_37"] .clock__row--7 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_42"] .clock__row--6 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_47"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_52"] .clock__row--2 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_57"] .clock__row--1 .clock__dot--1 {
    color: orange;
    box-shadow: 0 0 6px;
}



/* Center dot for x3, x8
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-03"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-08"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-13"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-18"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-23"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-28"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-33"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-38"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-43"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-48"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-53"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-58"] .clock__row--4 .clock__dot--4,



/* Minutes for x3, x8
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-03"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-03"] .clock__row--2 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-03"] .clock__row--3 .clock__dot--4,

.clock.is-showing-minutes[data-time*="-08"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-08"] .clock__row--2 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-08"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-13"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-13"] .clock__row--3 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-13"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-18"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-18"] .clock__row--4 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-18"] .clock__row--4 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-23"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-23"] .clock__row--5 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-23"] .clock__row--6 .clock__dot--7,

.clock.is-showing-minutes[data-time*="-28"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-28"] .clock__row--6 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-28"] .clock__row--7 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-33"] .clock__row--5 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-33"] .clock__row--6 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-33"] .clock__row--7 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-38"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-38"] .clock__row--6 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-38"] .clock__row--7 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-43"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-43"] .clock__row--5 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-43"] .clock__row--6 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-48"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes[data-time*="-48"] .clock__row--4 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-48"] .clock__row--4 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-53"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-53"] .clock__row--3 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-53"] .clock__row--2 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-58"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-58"] .clock__row--2 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-58"] .clock__row--1 .clock__dot--1,



/* Seconds for x3, x8
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes.is-showing-seconds[data-time*="_03"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_08"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_13"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_18"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_23"] .clock__row--6 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_28"] .clock__row--7 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_33"] .clock__row--7 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_38"] .clock__row--7 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_43"] .clock__row--6 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_48"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_53"] .clock__row--2 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_58"] .clock__row--1 .clock__dot--1 {
    color: orangered;
    box-shadow: 0 0 6px;
}



/* Center dot for x4, x9
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-04"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-09"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-14"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-19"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-24"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-29"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-34"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-39"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-44"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-49"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-54"] .clock__row--4 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-59"] .clock__row--4 .clock__dot--4,



/* Minutes for x4, x9
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes[data-time*="-04"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-04"] .clock__row--2 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-04"] .clock__row--3 .clock__dot--4,

.clock.is-showing-minutes[data-time*="-09"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-09"] .clock__row--2 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-09"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-14"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-14"] .clock__row--3 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-14"] .clock__row--3 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-19"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes[data-time*="-19"] .clock__row--4 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-19"] .clock__row--4 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-24"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-24"] .clock__row--5 .clock__dot--6,
.clock.is-showing-minutes[data-time*="-24"] .clock__row--6 .clock__dot--7,

.clock.is-showing-minutes[data-time*="-29"] .clock__row--5 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-29"] .clock__row--6 .clock__dot--5,
.clock.is-showing-minutes[data-time*="-29"] .clock__row--7 .clock__dot--5,

.clock.is-showing-minutes[data-time*="-34"] .clock__row--5 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-34"] .clock__row--6 .clock__dot--4,
.clock.is-showing-minutes[data-time*="-34"] .clock__row--7 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-39"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-39"] .clock__row--6 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-39"] .clock__row--7 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-44"] .clock__row--5 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-44"] .clock__row--5 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-44"] .clock__row--6 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-49"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes[data-time*="-49"] .clock__row--4 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-49"] .clock__row--4 .clock__dot--3,

.clock.is-showing-minutes[data-time*="-54"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-54"] .clock__row--3 .clock__dot--2,
.clock.is-showing-minutes[data-time*="-54"] .clock__row--2 .clock__dot--1,

.clock.is-showing-minutes[data-time*="-59"] .clock__row--3 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-59"] .clock__row--2 .clock__dot--3,
.clock.is-showing-minutes[data-time*="-59"] .clock__row--1 .clock__dot--1,



/* Seconds for x4, x9
   -------------------------------------------------------------------------- */

.clock.is-showing-minutes.is-showing-seconds[data-time*="_04"] .clock__row--1 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_09"] .clock__row--1 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_14"] .clock__row--2 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_19"] .clock__row--4 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_24"] .clock__row--6 .clock__dot--7,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_29"] .clock__row--7 .clock__dot--5,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_34"] .clock__row--7 .clock__dot--3,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_39"] .clock__row--7 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_44"] .clock__row--6 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_49"] .clock__row--4 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_54"] .clock__row--2 .clock__dot--1,
.clock.is-showing-minutes.is-showing-seconds[data-time*="_59"] .clock__row--1 .clock__dot--1 {
    color: red;
    box-shadow: 0 0 6px;
}
              
            
!

JS

              
                function setTime() {
    var date = new Date(),
        hours = ( '0' + date.getHours() ).slice( -2 ),
        minutes = ( '0' + date.getMinutes() ).slice( -2 ),
        seconds = ( '0' + date.getSeconds() ).slice( -2 ),
        time = hours + '-' + minutes + '_' + seconds,
        clock = $( '.clock' );

    clock.attr( 'data-time', time );
}

setInterval( setTime, 1000 );
              
            
!
999px

Console