index.html

<div class="controls">
  <a href="#user-content-s1">yeah</a>
  <a href="#user-content-s2">unyeah</a>
  <a href="#user-content-s3">eggbug</a>
</div>

<div class="screen-container">
  <div class="screen" id="s1">:yeah:</div>
  <div class="screen" id="s2">:unyeah:</div>
  <div class="screen" id="s3">:eggbug:</div>
</div>

style.css

* {
  box-sizing: border-box;
}

.controls {
  display: flex;
  gap: 0.5rem;

  margin-bottom: 1rem;
}

.controls > * {
  text-decoration: none;
  padding: 0.25rem 1rem;
  border-radius: 3px;
  background: #fafafa;
  border: 1px solid #888;
  box-shadow: inset 0 -2px 0 #ccc;
  color: #333;
  font-weight: bold;
}

.screen-container {
  box-sizing: content-box;
  width: 320px;
  height: 240px;
  overflow: hidden;
  border: 1px solid black;
}

.screen {
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  padding: 2rem;
  text-align: center;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  font-size: 4rem;
  line-height: 160px;
}

#s1 {
  background: hsl(100 60% 95%);
}

#s2 {
  background: hsl(100 0% 95%);
}

#s3 {
  background: hsl(340 50% 95%);
}