JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<ul id="options">
  <li><a href="#A">A</a></li>
  <li><a href="#B">B</a></li>
  <li><a href="#C">C - mit viel langem und störendem Text dazu gekleistert, damit's auch wirklich umbricht</a></li>
  <li><a href="#D">D</a></li>
</ul>

CSS

#options {
	display: grid;
  align-content: stretch;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

#options li {
}

#options a {
	color: initial;
	display: block;
	padding: 1em 2em;
	text-align: center;
	text-decoration: none;
  height: 100%;
  box-sizing: border-box;
	border-radius: 0.2em;
	box-shadow: 0 0 0.3em 0.2em #888;
  display: grid; place-content:center;
}
#options li:nth-of-type(1) a {
	background: #f88;
}

#options li:nth-of-type(2) a {
	background: #8f8;
}

#options li:nth-of-type(3) a {
	background: #88f;
}

#options li:nth-of-type(4) a {
	background: #888;
}
#options li a:hover {
  background-color: #ff0;
}


@media (min-width: 400px) {

	#options {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (min-width: 740px) {

	#options {
		grid-template-columns: repeat(4, 1fr);
	}

}