JSFiddle - React, Tailwind, and code Playground

by lv ning

HTML

<div class="container">
  <div class="wrap">
    <label for="cross">
      <input type="checkbox" name="check" id="cross">
      <div class="x"></div>
      <div class="y"></div>
    </label>
  </div>
</div>

CSS

.wrap {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #407d94;
  position: relative;
}

label {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.x {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 30px;
  left: 50%;
  margin-left: -10px;
  border-radius: 2px;
  background: #eee;
  transition: all 0.5s ease;
}

.y {
  position: absolute;
  width: 20px;
  height: 100px;
  top: 70px;
  left: 50%;
  margin-left: -10px;
  border-radius: 2px;
  background: #eee;
  transition: all 0.5s ease;
}

#cross {
  display: none;
}

#cross:checked~div.x {
  height: 120px;
  top: 50%;
  margin-top: -60px;
  transform: rotate(45deg);
}

#cross:checked~div.y {
  height: 120px;
  top: 50%;
  margin-top: -60px;
  transform: rotate(-45deg);
}