JSFiddle - React, Tailwind, and code Playground

by jimmyt1001

HTML

<body>

<!-- Start Container -->

<div id="container">
	<div id="header">
		<h1>Header</h1>
	</div>
		
        <div class="top-mar-10">
			<div id="tab" class="float-left"><p>COUPON CENTER</p></div>
				
				<div class="coupon-info float-left"><span id="total">0</span> coupon added to my account</div>

					<a href="#" class="coupon-info float-right" id="removeAll">
					Remove all coupons from my account
					</a>
					
         </div>    
         
         <!-- Start promoContainer -->
         
						<div id="promoContainer" class="clear-left">
                        		

						<!-- Start Product Block -->
                        
<div class="product-block float-left">
	<div class="brand-header">
    	<h3>BRAND LOGO</h3>
		<div class="head-content">Take $10 off any apparel purchase of $50 or more! </div>
	</div>
							
	<div class="product-image">

        <div class="product-details hide" id="prod-detail1">
        <p>PROMO CODE: XXXXXXXXXXXXX</p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Donec sit amet metus eget nisl blandit pretium. Donec quis lectus 
        nec augue feugiat sagittis vitae non elit. Pellentesque in quam 
        quis purus varius cursus.
        </div>

	</div>

    <div class="product-control">
        <div class="details float-left" id="show-prod-detail1"> See Details</div>
        <div class="divider float-left">|</div>
        <a href="#" class="shop float-left">Shop</a>
        <button type="button" class="float-right load-account" id="btn1"> Load To Account</button>
    </div>

	<div class="product-notes clear-left">Available Online and In Store. Expires 12/31/2013</div>

</div>
						<!-- End Product Block -->
						
						<!-- Start Product Block -->
						<div class="product-block float-left">
								<div class="brand-header"><h3>BRAND LOGO</h3>
									<div class="head-content">Take $10 off any apparel purchase of $50 or more! </div>
							</div>
							
							<div...

CSS

body { 
	margin:0; 
	padding:0; 
}


#container
{
	margin:10px 10px 0;
	width:1250px;
}

#header {
	background-color: #e7e9e3;
	width:100%;
	height:120px;	
	}	
		
#header h1 {
	font-size:72px;
	margin:0;
	padding-top:15px;
	margin-top:33px;
	}	
#header h1, #footer p {
	
	font-family:"Georgia", Times New Roman, Times;
	text-align:center;
	color: #050070;
	}
	

#footer p {
	font-size:45px;
	padding-top:25px
	}

#footer {
	height:95px;
	}
	

#mainContent {
	margin-top:12px;
}
	
#promoContainer {
	background-color:#e7e9e3;
	padding-top:10px;
	height:670px;
}	

#tab {
	width:148px;
	height:34px;
	background-color:#e7e9e3;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;	
}

#tab p
{
	margin-left:10px;
	padding-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	font-weight:bold;
}	


.coupon-info
{
	color:#050070;
	font-size:12px;
	font-weight:bold;
	padding:10px 0 0 14px;
}


a.coupon-info:link
{
	display:block;
}


.product-block
{
	width:290px;
	height:321px;
	margin:2px 0 10px 10px; 
	margin-top:2px;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

.brand-header
{
	padding:0 5px;
}

.brand-header h3
{
	font-size:16px;
	font-weight:900;
	border-bottom:1px solid #b8b8b8;
}

.head-content
{
	font-size:15px;
	font-weight:bold;
	color:#333;
	margin-top:-10px;
}

.product-image
{
	background:#fff url('https://dl.dropboxusercontent.com/u/99591531/product.jpg') no-repeat 10px -1px;
	height:181px;
	padding:0;
}

.product-details
{
	background: #010019; 
	background: linear-gradient(to bottom, #010019 49%,#050071 100%); /* W3C */
	font-size:12px;
	height:181px;
	color:#fff;
	padding:10px;
}

.product-details p
{
	font-weight:bold;
}

.product-control
{
	background: #010019; 
	background: linear-gradient(to bottom, #050071 1%, #010019 100%) repeat scroll 0 0 transparent; /* W3C */
	color:#00f6ff;
	height:34px;
	padding:0...

JavaScript

$(document).ready(function() {
 
    $(".product-control button").click(function() {
        $('#total').text(parseInt($('#total').text())+1);
        $(this).html('Coupon Loaded').removeClass('load-account').addClass('account-loaded').attr('disabled', true);
		              
    });
 
   
   
   
    $("#removeAll").click(function() {
        $('#total').text(0);
		$('button').removeAttr('disabled', false).removeClass('account-loaded').addClass('load-account');
		return false;
               
    });
	
	
/*	
	$('.product-control .details').click(function() {
    	$(this).parent().parent().find('.product-details').toggleClass('hide');            
	});
	*/


	$('.product-control .details').click(function() {
    	$(this).parents('.product-block').find('.product-details').toggleClass('hide');            
	});
				
   
 });// JavaScript Document