JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div class="color-picker__options">
  <input id="red" type="radio" name="color" value="red" >
  <label for="red" class="color-picker__red"></label>
  <input id="blue" type="radio" name="color" value="blue">
  <label for="blue" class="color-picker__blue"></label>
  <input id="yellow" type="radio" name="color" value="yellow">
  <label for="yellow" class="color-picker__yellow"></label>
</div>

SCSS

//Events Colors
$e-green: #0bd46f;
$e-gray: #d7d7d7;
$e-black: #000000;
$e-cyan: #00d3e0;
$e-blue: #0065eb;
$e-purple: #8d00e0;
$e-green: #00a651;
$e-red: red;
$e-orange: #ff6b17;
$e-yellow: #fff200;

.color-picker__options {
  input[type=radio] {
    display: none;
  }
  
  label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 6px;
    width: 20px;
    height: 20px;
  }
  
  input[type=radio]:checked {
  }
  
  input[type=radio]:checked + label:before {
    content: "\e91f";
    color: white;
    font-size: 10px;
    text-align: center;
    line-height: 10px;
    position: absolute;
  }
}

.color-picker__red {
  background-color: $e-red;
}

.color-picker__blue {
  background-color: $e-blue;
}

.color-picker__yellow {
  background-color: $e-yellow;
}