JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<figure class="image-anim">
						<div class="screen">
							<div class="css-menu">
							  <div>
								<input type="radio" id="c1" name="segment" checked>
								<input type="radio" id="c2" name="segment">
								<input type="radio" id="c3" name="segment">
								<input type="radio" id="c4" name="segment">
								<input type="radio" id="c5" name="segment">
								<input type="radio" id="c6" name="segment">
								<input type="radio" id="c7" name="segment">
								<input type="radio" id="c8" name="segment">
								<input type="checkbox" id="toggle" checked="checked">
								<div class="holder">
								  <div class="segment">
									<label for="c1"><span class="fab fa-android"></span></label>
									<label for="c2"><span class="fab fa-android"></span></label>
									<label for="c3"><span class="fab fa-android"></span></label>
									<label for="c4"><span class="fab fa-android"></span></label>
									<label for="c5"><span class="fab fa-android"></span></label>
									<label for="c6"><span class="fab fa-android"></span></label>
									<label for="c7"><span class="fab fa-android"></span></label>
									<label for="c8"><span class="fab fa-android"></span></label>
								  </div>
								  <div class="curve-lower">
									<div class="curve"></div>
								  </div>
								  <div class="curve-upper"></div>
								  <div class="center">
									<div class="css-eye"</div>
								  </div>
								</div>
								</div>
							  </div>
							</div>
						</div>
                    </figure>

CSS

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
}

.image-anim {
    display: block;
    position: relative;
	padding-top: 66.6666%;
	@media (max-width: 768px) {
		padding-top: 100%;
	}
}

.css-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 10px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
}

.css-menu > div {
	position: relative;
	margin-bottom: 250px;
	padding-bottom: 100%;
	max-width: 100%;
	height: 0;
}

.css-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.css-menu input {
  position: absolute;
  display: none;
}

.css-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.css-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.css-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-130deg) scale(0);
  transition: 0s;
}

.css-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(45deg);
}

.css-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #567a98;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.css-menu .segment label span {
	display: block;
	position: absolute;
	left:...