.tab-content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: none;
}

.tab-content.active {
  display: grid !important;
}

.tab-content.animate-in-left {
  animation: in-left 0.4s forwards;
}

.tab-content.animate-in-right {
  animation: in-right 0.4s forwards;
}

.tab-content.animate-out-left {
  animation: out-left 0.4s forwards;
}

.tab-content.animate-out-right {
  animation: out-right 0.4s forwards;
}

@keyframes in-left {
  from {transform: translateX(100%); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}

@keyframes in-right {
  from {transform: translateX(-100%); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}

@keyframes out-left {
  from {transform: translateX(0); opacity: 1;}
  to {transform: translateX(-100%); opacity: 0;}
}

@keyframes out-right {
  from {transform: translateX(0); opacity: 1;}
  to {transform: translateX(100%); opacity: 0;}
}
input[name="clock"]:checked + label {
  background-color: blue;
  color: white;
}