Day Timeline

<div class="nuda-day-timeline">
  <div class="nuda-day-timeline__slot">
    <span class="nuda-day-timeline__hour">9:00</span>
    <span class="nuda-day-timeline__dot"></span>
    <span class="nuda-day-timeline__label">Standup</span>
  </div>
  <!-- Repeat per event -->
</div>

.nuda-day-timeline {
  position: relative;
  padding: 6px 12px 6px 60px;
  width: 100%;
  max-width: 280px;
}

.nuda-day-timeline::before {
  content: '';
  position: absolute;
  left: 54px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,rgba(228,255,84,.4),rgba(228,255,84,.05));
}

.nuda-day-timeline__slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  animation: _dtIn .55s cubic-bezier(.16,1,.3,1) both;
}

.nuda-day-timeline__hour {
  position: absolute;
  left: -50px;
  width: 42px;
  text-align: right;
  color: #63636e;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.nuda-day-timeline__dot {
  position: absolute;
  left: -9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 0 3px #09090b,0 0 8px #e4ff54;
  transition: transform .25s;
}

.nuda-day-timeline__slot:hover .nuda-day-timeline__dot {
  transform: scale(1.4);
}

.nuda-day-timeline__label {
  color: #fafafa;
  font-size: 12px;
}

@keyframes _dtIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-day-timeline__slot {
    animation: none;
  }
}