JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
 
<div class="wrapper">
	 <input class="checkbox" type="checkbox" id="1">
	 <div class="content">
		 <div class="check-icon"><i class="fa fa-check-circle" aria-hidden="true"></i></div>
		 <label for="1">
			 Checkbox-button
		 </label>
	 </div>
</div>
<div class="wrapper">
	 <input class="checkbox" type="checkbox" id="1">
	 <div class="content">
		 <div class="check-icon"><i class="fa fa-check-circle" aria-hidden="true"></i></div>
		 <label for="1">
			 Checkbox-button
		 </label>
	 </div>
</div>

CSS

.wrapper { position: relative; }
.content { border: 1px solid #CCC;border-radius: 3px; margin-bottom: 15px;}
.content label { cursor: pointer; display:block; text-align:center; width: auto; height: auto; padding: 20px; margin: 0; }
.checkbox ~ .content .fa-check-circle { color: #898989; }
.checkbox ~ .content:hover { border: 1px solid #2f9c7a; }
.checkbox ~ .content:hover .fa-check-circle { color:#2f9c7a; }
.checkbox:checked ~ .content { border: 1px solid #2f9c7a; background-color:#2f9c7a; color:#fff; }
.checkbox:checked ~ .content .fa-check-circle { color:#fff; }
.checkbox { position: absolute;top: 0; left: 0;opacity: 0;visibility: hidden;width: 100%;margin: 0;height: 100%;}
.checkbox ~ .content { transition: all 500ms ease-out; }
.checkbox ~ .content .check-icon{ position: absolute;top: 5px;right: 5px;z-index: 2;transition: all 100ms ease-out; }