JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="div">
  <input type="text" /> 
  
  <label class="custom-cb">
    <input type="checkbox" checked/>
    <span></span>
  </label>
  
  <input type="text" />
</div>

CSS

/* CUSTOM CHECKBOX */
.custom-cb {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

.custom-cb > span {
    color: #34495E;
    padding: 0px;
}

.custom-cb > input {
    height: 16px;
    width: 16px;
    appearance: none;
    border: 1px solid #34495E;
    border-radius: 1px;
    outline: none;
    background-color: #white;
    cursor: pointer;
    font-size:16px;
  }

.custom-cb > input:focus {
  outline: 0.1rem  solid #006699;
}
.custom-cb > input:checked {
    border: 1px solid #41B883;
    background-color: #006699;
}

.custom-cb > input:checked + span::before {
    /*content: '\2713';*/
content:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='14px' height='14px' viewBox='0 0 16 16'  focusable='false'><path d='M2,10 6,14 15,5' stroke-width='1.5' stroke='white' fill='none'></path></svg>");
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.custom-cb > input:active {
    border: 2px solid #34495E;
}

/* Other*/

html, body{
  background: gray;
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
  overflow:hidden;
}

/*
content:url("data:image/svg+xml; utf8, <svg width='16px' height='16px' viewBox='0 0 16 16'  focusable='false'><path d='M2,9 6,13 15,4' stroke-width='1' stroke='white' fill='none'></path></svg>");
.checkbox > input:checked + span::before {
    content: '\2713';
    display: block;
    text-align: center;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size:14px;
    font-family: Roboto,"Helvetica Neue",sans-serif;
    transform: translate(-50%, -50%);
}*/