JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<div class="cont">
  <label class="customCb">
  <input type="radio" name="my" checked>
  <svg width="100%" height="100%"
       viewBox="0 0 200 100"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="1" y="1"
          width="198" height="98"
          stroke-dashoffset="564"
          stroke-dasharray="564"
          stroke="none"
          stroke-width='4'
          fill="none"
          stroke-linecap="round"
          rx="15" ry="15"/>
  </svg>  
  <i class="fas fa-check"></i>
  <span>14:00</span>
</label>





<label class="customCb">
  <input type="radio"  name="my" >
  <svg width="100%" height="100%"
       viewBox="0 0 200 100"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="1" y="1"
          width="198" height="98"
          stroke-dashoffset="564"
          stroke-dasharray="564"
          stroke="none"
          stroke-width='4'
          fill="none"
          stroke-linecap="round"
          rx="15" ry="15"/>
  </svg>  
  <i class="fas fa-check"></i>
  <span>15:00</span>
</label>






<label class="customCb">
  <input type="radio"  name="my">
  <svg width="100%" height="100%"
       viewBox="0 0 200 100"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="1" y="1"
          width="198" height="98"
          stroke-dashoffset="564"
          stroke-dasharray="564"
          stroke="none"
          stroke-width='4'
          fill="none"
          stroke-linecap="round"
          rx="15" ry="15"/>
  </svg>  
  <i class="fas fa-check"></i>
  <span>15:50</span>
</label>






<label class="customCb">
  <input type="radio"  name="my">
  <svg width="100%" height="100%"
       viewBox="0 0 200 100"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="1" y="1"
          width="198" height="98"
          stroke-dashoffset="564"
          stroke-dasharray="564"
          stroke="none"
          stroke-width='4'
          fill="none"
         ...

CSS

.cont{
    display: flex;
    flex-wrap: wrap;
}
.customCb {
  margin-left:5px;
  position:relative;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:50px;
}
.customCb .fa-check{
    position: absolute;
    opacity:0;
    top: -5px;
    right: -5px;
    color: white;
    background: #0042a7;
    border-radius: 100%;
    padding: 3px;
    font-size: 10px;
}
.customCb span{
  font-size:18px;
  font-weight:bold;
}
.customCb input{
  display:none;
}
.customCb svg{
  position:absolute;
}
.customCb input +svg rect{
  transition:0.5s;
  cursor:hand;
}
.customCb input:hover +svg rect,
.customCb input:checked +svg rect{
  stroke-dashoffset:0;
  stroke:#0042a7;
}
.customCb input:checked +svg rect{
  fill:#0006ab45;
}
.customCb input:hover + svg + .fa-check,
.customCb input:checked +svg + .fa-check{
  animation-duration: 1s;
  animation-name: show;  
  animation-fill-mode: forwards;
}

@keyframes show {
  50% {
    opacity:0;
  }

  100% {
    opacity:100;
  }
}