مولد CSS للجدول الزمني

.timeline {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 26px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ede9fe;
}

.timeline .item {
  position: relative;
  border-radius: 12px;
  background: white;
  color: #0f172a;
  padding: 16px;
}

.timeline .item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 0 4px color-mix(in srgb, #8b5cf6 20%, white);
}