JSFiddle - React, Tailwind, and code Playground

HTML

<p>
 Test
 <a href="/somewhere">Somewhere (link)</a>
</p>
<input type="checkbox" id="test"><label for="test">Test label</label>
<p>
 Test
 <a href="/somewhere">Somewhere (link)</a>
</p>

CSS

input[type='checkbox'] { 
    height: 20px;
	border:1px solid #B5B7B8;
	font: 14px/26px 'pt-sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	padding:7px 7px 7px 12px;
	/*margin:0 0 30px 0;*/
	background:#FFF;
	border:1px solid #d5d5d6;
	outline:none;
	color:#96999D;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);        
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	-webkit-transition: all 0.15s;
	   -moz-transition: all 0.15s;
		-ms-transition: all 0.15s;
		 -o-transition: all 0.15s;
		  	transition: all 0.15s;			
}

input[type=checkbox]:focus
  {
	border-color: #ACACB8;
	color: #2E3236;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
	        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
}

input[type=checkbox]:checked {
    background-color: red;
}

input, label { vertical-align: middle }
label { margin-left: 5px; }