JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-md-6 checkboxes">
<label for="id_tags_0"><input type="checkbox" name="tags" value="4" id="id_tags_0">
 Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
Tag 2</label>
<label for="id_tags_2"><input type="checkbox" name="tags" value="2" id="id_tags_2">
Tag 3</label>
<label for="id_tags_3"><input type="checkbox" name="tags" value="3" id="id_tags_3">
Tag 4</label>
<label for="id_tags_4"><input type="checkbox" name="tags" value="5" id="id_tags_4">
Tag 5</label>
</div>

CSS

.checkboxes label {
	/*display: inline-block;*/
	cursor: pointer;
	position: relative;
	padding-left: 28px;
	margin-right: 20px;
	margin-bottom: 0;
	line-height: 24px;
	font-size: 16px;
}

/*Hide default checkbox*/
.checkboxes  input[type=checkbox] { display: none; }

/*Show an empty box before the our label by default*/
.checkboxes label:before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 3px;
	background-color: #fff;
	border: 2px solid #d0d0d0;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: all 0.25s;
	font-family: "FontAwesome";
	font-size: 12px;
	color: #fff;
	text-align: center;
	line-height: 15px;
}


/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
	content: "\f00c";
	background-color: #66676b;
	border: 2px solid #66676b;
}

.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
	content: "\f00c";
	background-color: #66676b;
	border: 2px solid #66676b;
}