<div class="face">
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

$size: 1;
$border-color: #4D4949;
$hands-color: #4D4949;
$sec-color: #E74256;

@function rem($px) {
  @return $px / 16 * 1rem;
}

html {
  font-size: $size * 100%;
}

.face {
  position: absolute;
  top: calc(50% - 7rem);
  left: calc(50% - 7rem);
  display: block;
  width: 12rem;
  height: 12rem;
  border-radius: 100%;
  border: .75rem solid $border-color;
  &:after {
    content: '';
    position: absolute;
    top: calc(50% - .75rem);
    left: calc(50% - .75rem);
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: $hands-color
  }
}


$width: rem(80);
$height: rem(14);

.hours {
  position: absolute;
  width: .70rem;
  height: 10rem;
  top: 1rem;
  left: calc(50% - .35rem);
  
  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 5rem;
    border-radius: 2rem;
    background: $hands-color;
  }
}

.minutes {
  @extend .hours;
  &:before {
    height: 4rem;
    margin-top: 1rem;
  }
}

.seconds {
  @extend .hours;
  left: calc(50% - .25rem);
  z-index: 1;
  width: .5rem;
  &:before {
    background: $sec-color;
  }
  &:after {
    content: '';
    position: absolute;
    top: calc(50% - .35rem);
    left: calc(50% - .35rem);
    display: block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: $sec-color;
  }
}

setInterval(function(document) {
  var d = new Date(),
      s = d.getSeconds() * 6,
      m = d.getMinutes() * 6,
      h = d.getHours() * 30 + (d.getMinutes()/2);
  
  $('.seconds').css({transform: 'rotate(' + s + 'deg)'});
  $('.minutes').css({transform: 'rotate(' + m + 'deg)'});
  $('.hours').css({transform: 'rotate(' + h + 'deg)'});
}, 1000);