JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app">
  <label class="f-contain">
    <input type="checkbox" checked="">
    <span>First checkbox</span>
    <div class="f-input"></div>
  </label>
  <label class="f-contain">
    <span>Second checkbox</span>
    <input type="checkbox" checked="" disabled>
    <div class="f-input"></div>
  </label>
</div>

CSS

body {
  background: #20262E;
  padding: 1.5rem;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: .25rem;
  padding: 1.5rem;
  transition: all 0.2s;
}

/* .f-contain *,
.f-contain *:before,
.f-contain *:after {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
} */

.f-contain input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.f-contain span {
  line-height: 1.45;
  font-family: inherit;
  font-size: inherit;
}

.f-contain {
  display: table;
  position: relative;
  padding-left: 1.8rem;
  cursor: pointer;
  margin-bottom: .5rem;
}

.f-contain .f-input::after {
  left: .45rem;
  top: .18rem;
  width: .25rem;
  height: .6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transition: background 250ms;
  transform: rotate(45deg);
}

.f-contain input:disabled ~ .f-input::after {
  border-color: #8795A1;
}

.f-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.25rem;
  width: 1.25rem;
  background: #F1F5F8;
  transition: background 250ms;
  border: 1px solid #B8C2CC;
  border-radius: 0.125rem;
}

.f-contain:hover input ~ .f-input,
.f-contain input:focus ~ .f-input {
  background: #e7eef3;
}

.f-contain input:checked ~ .f-input {
  background: #3490DC;
  border-color: #3490DC;
}

.f-contain input:disabled ~ .f-input {
  background: #F1F5F8;
  border-color: #B8C2CC;
  opacity: 0.5;
  cursor: not-allowed;
}

.f-contain input:checked:focus ~ .f-input, .f-contain:hover input:not([disabled]):checked ~ .f-input {
  background: #4a9ce0;
  border-color: #4a9ce0;
}

.f-input::after {
  content: '';
  position: absolute;
  display: none;
}

.f-contain input:checked ~ .f-input::after {
  display: block;
}

.f-contain .f-input::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  margin-left: -14px;
  margin-top: -15px;
  background: rgba(42, 122, 192, 0.6);
  border-radius: 100%;
 ...