JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<p>Do you like?</p>
<form action="#">
  <p><input type="checkbox" id="test1" /><label for="test1">Red</label></p>
  <p><input type="checkbox" id="test2" /><label for="test2">Green</label></p>
  <p><input type="checkbox" id="test3" /><label for="test3">Blue</label></p>
</form>

CSS

form {
		width: 80px;
		margin: 0 auto 55px;
		text-align: left;
	}
	p, p a { 
		color: #aaa;
		text-decoration: none;
	}
	p a:hover,
	p a:focus {
		text-decoration: underline;
	}
	p+p { color: #bbb; margin-top: 3em;}
	form p { margin: 15px 0; }
	.detail {position: absolute; text-align: right; right: 5px; bottom: 5px; width: 50%;}
	a[href*="intent"] {
		display:inline-block;
		margin-top: 0.4em;
		padding-left: 25px;
		background: url(bird.png) 0 4px no-repeat;
	}


	/*
		Demo CSS code
	*/
	
	/* Base for label styling */
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		left: -9999px;
	}
	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label {
		position: relative;
		padding-left: 25px;
		cursor: pointer;
	}

	/* checkbox aspect */
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		content: '';
		position: absolute;
		left:0; top: 2px;
		width: 17px; height: 17px;
		border: 1px solid #aaa;
		background: #f8f8f8;
		border-radius: 3px;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
	}
	/* checked mark aspect */
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		content: '✔';
		position: absolute;
		top: 0; left: 4px;
		font-size: 14px;
		color: #09ad7e;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}
	/* checked mark aspect changes */
	[type="checkbox"]:not(:checked) + label:after {
		opacity: 0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}
	[type="checkbox"]:checked + label:after {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	/* disabled checkbox */
	[type="checkbox"]:disabled:not(:checked) + label:before,
	[type="checkbox"]:disabled:checked + label:before {
		box-shadow: none;
		border-color:...