JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<img src="http://s11.postimg.org/sdorw4vlf/logo.jpg" alt="2015 Reading Challenge logo">
		
	
	<div class="mainContent">
		<div class="content">
		<header>
				<h2><a href="#" title="Valentina's Challenge">My Challenge</a></h2>
				</header>
			<article class="leftcontent">
				
				<content>
					<div class="checkbox">  
					    <input id="check1" type="checkbox" name="check" value="check1">  
					    <label for="check1">A book with more than 500 pages</label>  
					   
					    <br>  
					    <input id="check2" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check2">A classic romance</label>  
					     <br>
					    <input id="check3" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check3">A book that became a movie</label>  
					
					    <br>  
					     <input id="check4" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check4">A book published this year</label>  
					
					    <br> 
					    <input id="check5" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check5">A book written by someone under 30</label>
					   
					    <br> 
					    <input id="check6" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check6">A book with nonhuman characters</label>  
					   
					    <br> 
					    <input id="check7" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check7">A funny book</label>  
					  
						<br>
						<input id="check8" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check8">A book by female author</label>  
					   
					    <br>  
					     <input id="check9" type="checkbox" name="check" value="check3" checked="checked">  
					    <label for="check9">A mystery or thriller</label>  
					
					    <br> 
					    <input id="check10" type="checkbox" name="check" value="check3"...

CSS

body {
	background-color: #f8f5ee;
	color: #000305;
	font-size: 87.5%;
	font-family: Tahoma;
	text-align: left;
}

a {
	text-decoration: none;
	color: #fc5c5c;
}


#body {
	margin: 0 auto;
	width: 70%;
	clear: both;
}

img {
	display:block;
  margin-left:auto;
  margin-right:auto;
}
.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.content {
    width: 100%;
    float: left;
    padding-left: 15%;
}

.leftcontent {

	
	width: 25%;
	float: left;
	}

.rightcontent {

	width: 35%;
	margin: 0 auto;
}
.mainfooter {
	width: 100%;
    padding-left: 40%;
    float: left;
}

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 18px;  
  	font-family: Times New Roman;
    color: #201f1d;
}  



label:before {  
    content: "";  
    display: inline-block;  
     width: 16px;  
    height: 16px;  
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}  

input[type=checkbox] {  
    display: none;  
}

.checkbox label:before {  
    border-radius: 3px;  
}  

input[type=checkbox]:checked + label:before {  
    content: "\2713";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 15px;  
}  
input[type=checkbox]:checked + label { 
    text-decoration: line-through;
    color: #ccc;
}