JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<form class="menu">
	<ul class="menu-list">
		<li class="menu-item">Старт</li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="1" checked><span class="menu-selection">1</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="2"><span class="menu-selection">2</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="3"><span class="menu-selection">3</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="4"><span class="menu-selection">4</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="5"><span class="menu-selection">5</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="6"><span class="menu-selection">6</span></label></li>
	</ul>
	<ul class="menu-list">
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="7"><span class="menu-selection">7</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="8"><span class="menu-selection">8</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="9"><span class="menu-selection">9</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="10"><span class="menu-selection">10</span></label></li>
		<li class="menu-item"><label class="menu-label"><input type="radio" name="step" value="11"><span class="menu-selection">11</span></label></li>
		<li class="menu-item">Финиш</li>
	</ul>
</form>

CSS

.menu {
	margin: 0;
	border: 3px dashed #999;
	background: #f0f0f0;
}
.menu-list {
	display: table;
	table-layout: fixed;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.menu-list + .menu-list {
	border-top: 3px dashed #999;
}
.menu-item {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 2em;
}
.menu-item + .menu-item {
	border-left: 3px dashed #999;
}
.menu-label {
	display: block;
	margin: -3px;
	cursor: pointer;
}
.menu-selection {
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 100px;
	line-height: 100px;
	border: 3px solid transparent;
	cursor: pointer;
}
.menu-selection:hover {
	z-index: 1;
	border-color: #777;
}
.menu-label input[type="radio"] {
	display: none;
}
input[type="radio"]:checked ~ .menu-selection {
	border-color: #333;
	box-shadow: inset 0 0 40px rgba(102, 102, 102, .5);
}