JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<input type="checkbox" />

CSS

body {
    padding: 10px;
}
input[type=checkbox] {
    display: inline-block;
    background: none #fff;
    border: none;
    -webkit-appearance: none;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    outline: none;
}
input[type=checkbox]:checked {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M25.366 5.783l-12.772 12.772-5.96-5.96-4.257 4.257 10.217 10.217 17.029-17.029z" fill="#777777"></path></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
}