JSFiddle - React, Tailwind, and code Playground

by JoshSalway

HTML

<p><label></label><input type="checkbox" id="checkbox" name="checkbox" class="regular-checkbox big-checkbox" value="Yes" checked="checked"><label for="checkbox" style="margin-right:10px;"> </label>Subscribe me to your mailing list for upcoming events, hot offers and deals
</p>

CSS

body {
    background: black;
    font-family: "Century Gothic", "Gill Sans MT", Arial, Helvetica, sans-serif;
}
p {
margin: 0px 0px 20px 0px;
color: #ffffff;
line-height: 22px;
font-size: 13px;
}
#holder > div {
    padding: 2%;
    float: left;
    width: 96%;
}
.regular-checkbox{
	display: none;
}
.regular-checkbox + label {
	border: 1px solid #cacece;
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	float:none;
	width:auto;
}
.regular-checkbox:checked + label:after {
	content:'\2714';
	font-size: 14px;
	position: absolute;
	top: 6px;
	left: 3px;
	color: white;
}
.big-checkbox + label {
	padding: 18px;
}
.big-checkbox:checked + label:after {
	font-size: 28px;
	left: 6px;
}