JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="content2">
    <div class="column">
        <img class="circle" src="images/money.png" alt="money">
        <p>A good bike will generally cost between $300 to $500.</p>
    </div>
    <div class="column">
        <img class="circle" src="images/size.png" alt="size">
        <p>Bicycles come in different sizes. Make sure you try a bicycle before you buy it. An uncomfortable fit may cause aches and a dislike for cycling.</p>
    </div>
    <div class="column">
        <img class="circle" src="images/store.png" alt="support your local bike shop">
        <p>Buy a bicycle from your local bicycle store. Bicycles sold at big box stores may come defective and are not always assembled correctly.</p>
    </div>
</div>

CSS

@charset "UTF-8";
/* CSS Document */

body {
	width:100%;
	height:100%;
	margin:0 auto;
}

.container {
	width:1280px;
	margin:auto;	
}

h3 {
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	font-size:2em;
	margin:0;
}
.section1 {
	width:960px;
	height:800px;
	margin:0 auto;
	background:#8E9E4F;
	padding:0;
}
	
.slide1 {
	width:800px;
	height:800px;
	margin:auto;	
}

.title {
	width:500px;
	display:block;
	padding-top: 200px;
	margin: 0 auto;
}

.tab1 {
	width:100px;
	position:relative;
	top:309px;
	left:347.5px;
	margin:0 auto;
	bottom:0;
	cursor: pointer;
}

/*Section 2*/
.section2 {
	width:960px;
	height:800px;
	margin:0 auto;
	padding:0;
	background-color:#F7931E;
}

.slide2 > h3 {
	color:#F15A24;
	padding-bottom:10px;
}

.header {
	background:url(images/sectionHeader.png) no-repeat top;
	width:960px;
	height:40px;
	padding:0;
	margin:0 auto;
}

.slide2 {
	background:#FDF5EB;
	width:960px;
	height:740px;
	margin:0 auto;
	padding:0;
}

.content2 {
	width:960px;
	height:787px;
	background-color:#3E3A36;
}

.tab2 {
	width:100px;
	position:relative;
	top:-164px;
	left:447.5px;
	margin:0 auto;
	bottom:0;
}

.column {
	width:200px;
	margin: 0 auto;
	float: left;
	padding:50px;
	text-align: center;
}

.circle {
	cursor: pointer;
}

.column > p {
	display: none;
}
/*Section 3*/

.section3 {
	width:960px;
	height:900px;
	margin:0 auto;
	padding:0;
	background-color:#0071BC;
}

.slide3 > h3 {
	color:#00558D;
	padding-bottom:10px;
}

.slide3 {
	background:#FDF5EB;
	width:960px;
	height:840px;
	margin:0 auto;
	padding:0;
}

.content3 {
	width:960px;
	height:587px;
	background-color:#18425E;
}

.tab3 {
	width:100px;
	position:relative;
	top:-64px;
	left:447.5px;
	margin:0 auto;
	bottom:0;
}

JavaScript

$('.circle').click(function() {
  $(this).next('p').fadeIn();
});