<div class="arial">
  <p>Arial</p>
  <p>abcdefgxxxx</p>
</div>
<div class="georgia">
  <p>Georgia</p>
  <p>abcdefgxxxx</p>
</div>
<div class="comic-sans">
  <p>Comic Sans</p>
  <p>abcdefgxxxx</p>
</div>
<div class="courier">
  <p>Courier</p>
  <p>abcdefgxxxx</p>
</div>

DIV {
  --stripe-height: 1ex;
  background: linear-gradient(
    palegreen, palegreen var(--stripe-height),
    transparent 0, transparent calc(var(--stripe-height) * 2),
    pink 0, pink  calc(var(--stripe-height) * 3),
    transparent 0, transparent  calc(var(--stripe-height) * 4),
    paleturquoise 0, paleturquoise calc(var(--stripe-height) * 5),
    transparent 0, transparent calc(var(--stripe-height) * 6)
  );
  background-size: 100% calc(var(--stripe-height) * 6);
  line-height: 1;
  font-size: 2rem;
  
  // Helpers
  text-align: center;
  outline: 1px solid #DDD;
  
  &:nth-child(1) {
    background-position: 0 -1.4ex;
  }
  
  &:nth-child(2) {
    background-position: 0 -3.1ex;
  }
  
  &:nth-child(3) {
    background-position: 0 -5.4ex;
  }
  
  &:nth-child(4) {
    background-position: 0 -7ex;
  }
}

// Helpers
BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1rem;
}

.arial {
  font-family: Arial, sans-serif;
}

.courier {
  font-family: Courier New, monospace;
}

.georgia {
  font-family: georgia;
}

.comic-sans {
  font-family: Comic Sans MS;
}

P {
  margin: 0;
}