JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<ul class="menu">
	<li class="menu-item item-1"><div class="menu-content">Берём розы</div></li>
	<li class="menu-item item-2"><div class="menu-content">Втыкаем ирис</div></li>
	<li class="menu-item item-3"><div class="menu-content">Пршпандориваем герберу</div></li>
	<li class="menu-item item-4"><div class="menu-content">И не понимаем, куда деть пион...</div></li>
</ul>

CSS

html {
	font-family: sans-serif;
	color: #333;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 25%,
		rgba(153, 153, 204, .2) 25%,
		rgba(153, 153, 204, .2) calc(25% + 1px),
		transparent calc(25% + 1px),
		transparent 75%, rgba(153, 153, 204, .2) 75%,
		rgba(153, 153, 204, .2) calc(75% + 1px),
		transparent calc(75% + 1px),
		transparent
	);
	background-size: 12px 12px;
}
.menu {
	overflow: hidden;
	position: relative;
	width: 1000px;
	margin: auto;
	padding: 0;
	list-style: none;
}
.menu-item {
	width: 200px;
	margin: auto;
}
.item-2 {
	float: left;
}
.item-3 {
	float: right;
}
.item-4 {
	clear: both;
	padding: 40px 0 0;
}
.menu-item:before {
	content: "";
	position: absolute;
	left: -120px;
	width: 1240px;
	height: 1240px;
	border: 1px solid rgba(0, 0, 0, .4);
	border-radius: 50%;
}
.item-1:before,
.item-2:before {
	top: 60px;
}
.item-3:before,
.item-4:before {
	bottom: 120px;
}
.item-1:before {
	clip: rect(0, 500px, 100px, 0);
}
.item-2:before {
	clip: rect(0, auto, 100px, 740px);
}
.item-3:before {
	clip: rect(1140px, 500px, auto, 0);
}
.item-4:before {
	clip: rect(1140px, auto, auto, 740px);
}
.menu-content {
	text-align: center;
}
.menu-content:before {
	content: "";
	display: block;
	height: 160px;
	margin:0 0 10px;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
.item-1 .menu-content:before {
	background-image: url(http://img0.liveinternet.ru/images/attach/c/8/100/785/100785088_1368267045_1d7bf648121c.png);
}
.item-2 .menu-content:before {
	background-image: url(http://topflo.ru/pc/article_pic/p_sini_tsvetok.png?1334056196);
}
.item-3 .menu-content:before {
	background-image: url(http://d1.endata.cx/data/games/35363/0_3d5b5_7f4a5b0b_L.png);
}
.item-4 .menu-content:before {
	background-image: url(http://img0.liveinternet.ru/images/attach/c/7/97/705/97705622_97449904_large_2.png);
}