JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<div class="container">
  <div class="area"></div>
  <div class="control">
    <div class="check">
      <label for="red">красный</label>
      <input id="red" type="radio" name="color" checked />
      <div class="red"></div><span></span>
    </div>
    <div class="check">
      <label for="green">зелёный</label>
      <input id="green" type="radio" name="color" />
      <div class="green"></div><span></span>
    </div>
    <div class="check">
      <label for="blue">синий</label>
      <input id="blue" type="radio" name="color" />
      <div class="blue"></div><span></span>
    </div>
  </div>
</div>

CSS

* {margin:0; padding:0;}
.container {position:relative; margin:50px;}
.control {margin-left:250px;}
.area {
  width:200px;
  height:200px;
  background:#ccc;
  margin-bottom:-200px;
}
.container input {display:none;}
.container input+div {
  width:180px;
  height:180px;
  position:absolute;
  top:10px;
  left:10px;
  display:none;
}
.container input:checked+div {display:block;}
.red {background:#c00;}
.green {background:#0c0;}
.blue {background:#00c;}
.container span {
  display:block;
  width:10px;
  height:10px;
  background:#ccc;
  margin-left:-20px;
  top:-12px;
  position:relative;
 }
#red:checked+div+span {background:#c00;}
#green:checked+div+span {background:#0c0;}
#blue:checked+div+span {background:#00c;}