JSFiddle - React, Tailwind, and code Playground

HTML

<p>
	This free tutorial is brought to you by <a href="https://psdtowp.net">PSDtoWP.net</a>
	<br><br>
	View this tutorial online: <a href="https://psdtowp.net/resources/wordpress-content/customize-radio-buttons-checkboxes-css.html">Customize radio buttons and checkboxes with only CSS</a>.
	<br><br>
	Make sure you also check out our tutorial about <a href="https://psdtowp.net/resources/wordpress-content/customize-radio-buttons-checkboxes-css-sprites.html">Customize radio buttons and checkboxes with CSS sprites</a>
</p>

<form action="" method="">
	<h2>Radio Buttons &#8594; Default</h2>
	<input type="radio" id="radio-default-1" name="radio-default" class="default">
	<label for="radio-default-1">Radio Button 1</label>

	<input type="radio" id="radio-default-2" name="radio-default" class="default">
	<label for="radio-default-2">Radio Button 2</label>

	<input type="radio" id="radio-default-3" name="radio-default" class="default">
	<label for="radio-default-3">Radio Button 3</label>
</form>

<form action="" method="">
	<h2>Custom CSS Radio Buttons</h2>
	<input type="radio" id="radio-btn-1" name="radio-btns">
	<label for="radio-btn-1" class="btn">Radio Button 1</label>

	<input type="radio" id="radio-btn-2" name="radio-btns">
	<label for="radio-btn-2" class="btn">Radio Button 2</label>

	<input type="radio" id="radio-btn-3" name="radio-btns">
	<label for="radio-btn-3" class="btn">Radio Button 3</label>
</form>

<form action="" method="">
	<h2>Checkbox &#8594; Default</h2>
	<input type="checkbox" id="checkbox-default-1" name="checkbox-default" class="default">
	<label for="checkbox-default-1">Checkbox 1</label>

	<input type="checkbox" id="checkbox-default-2" name="checkbox-default" class="default">
	<label for="checkbox-default-2">Checkbox 2</label>

	<input type="checkbox" id="checkbox-default-3" name="checkbox-default" class="default">
	<label for="checkbox-default-3">Checkbox 3</label>
</form>

<form action="" method="">
	<h2>Custom CSS Checkboxes</h2>
	<input...

CSS

/******************/
/* Default styles */
/******************/

*{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
body{background: #f5f5f5;}
form{border-top: 1px solid #bdbdbd;padding: 25px;}
form h2{margin: 0 0 20px 15px; font-weight: bold;font-size: 20px;font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
p{text-align: center;}
p:first-child{margin:25px 0;}
p:last-child{margin: 50px 0 0 0;}
input[type=radio].default, input[type=checkbox].default{display:inline-block!important;margin-left: 15px;}

/**************************/
/* Radio Buttons CSS only */
/**************************/

input[type=radio]{display:none;}
 
input[type=radio] + label.btn{    
    padding: 5px 10px;
    margin: 5px 10px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background: #cb4e4e;
    color: #fff;
    box-shadow: 0 6px #ab3c3c;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type=radio] + label.btn:hover{
    box-shadow: 0 4px #ab3c3c;
    top: 2px;
}
 
input[type=radio]:checked + label.btn{
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}


/*********************/
/* Checkbox CSS only */
/*********************/

input[type=checkbox]{display:none;}
 
input[type=checkbox] + label.btn{
    padding: 5px 10px;
    margin: 5px 10px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background: #cb4e4e;
    color: #fff;
    box-shadow: 0 6px #ab3c3c;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: none;
    border-radius: 5px;
    cursor:...