JSFiddle - React, Tailwind, and code Playground

HTML

<label class="custom-checkbox">
    <input type="checkbox" />
    <span></span> My custom checkbox 1
</label>

<br >

<label class="icon-checkbox">
    <input type="checkbox" />
    <span></span> My custom checkbox 3
</label>

<br >

<div class="slide-checkbox">	
	<input type="checkbox" id="checkbox-slide1" />
	<label for="checkbox-slide1"></label>
</div>

<br >

<div class="slide-checkbox2">
    <input type="checkbox" id="checkbox-slide2" />
    <label for="checkbox-slide2">
        <span></span>
    </label>
</div>

SCSS

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

html, body {
    font-size: 14px;
    font-family: 'Open Sans';
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="checkbox"] {
    display: none;
}

label.custom-checkbox {
	display: block;
	position: relative;
	padding-left: 25px;
    
    &:hover {
        cursor: pointer;
    }
    
    span {
        background: #fff;
        width: 14px;
        height: 14px;
        display: inline-block;
        border: 1px solid #eaeaea;

        position: absolute;
        top: 3px;
        left: 0;

        transition: all .2s linear;
    }
	
	&:hover span {
		border: 2px solid #bbb;
	}
    
    input[type="checkbox"]:checked + span {
        background: #27ae60;
        border: 2px solid #fff;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    }
}

label.icon-checkbox {
	display: block;
	position: relative;
	padding-left: 25px;
	margin-bottom: 15px;
    
    &:hover {
        cursor: pointer;
    }
    
    span {
        background: #fff;
        width: 20px;
        height: 20px;
        display: inline-block;
        border: 1px solid #eaeaea;
        
        font-size: 18px;
            
        position: absolute;
        top: 0;
        left: 0;

        transition: all .2s linear;
        
        &:after {
            content: '';
            width: 6px;
            height: 12px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            
            position: absolute;
            left: 6px;
            top: 2px;
            
            transform: rotate(45deg);
        }
    }
	
	&:hover span {
		border: 1px solid #bbb;
        
        &:after {
            border: solid #bbb;
            border-width: 0 2px 2px 0;
        }
	}
    
    input[type="checkbox"]:checked + span {
        background: #27ae60;
        border: 1px solid #fff;
        box-shadow:...