JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<div class="container">
<!-- Banner 1 -->    
<input type="radio" id="banner1" name="banner" value="http://jquery.com" checked="checked" />
<label for="banner1" class="banner banner1">
    <span class="banner-inner">
    <img class="img" src="http://www.touchfire.com/lp/001/images/banner_1.png"/>
    <span class="counter">1</span>
    <span class="title">Touchfire for $39<span class="cents">.99</span></span>
    <span class="tick" id="tick1">
        <img src="http://www.touchfire.com/lp/001/images/tick.png"/>
    </span>
        
    <span class="shipping">+ FREE SHIPPING<span class="limited"> (Limited Time Only)</span></span>
    </span>
</label>
    
<!-- Banner 2 -->
<input type="radio" id="banner2" name="banner" value="http://microsoft.com" />
<label class="banner banner2" for="banner2">
    <span class="banner-inner">
    <img class="img" src="http://www.touchfire.com/lp/001/images/banner_2.jpg"/>
    <img class="label" src="http://www.touchfire.com/lp/001/images/mostPopular.png"/>
    <span class="counter">2</span>
    <span class="title">Touchfires for $30<span class="ea">ea </span></span>
    
    <span class="tick" id="tick2">
        <img src="http://www.touchfire.com/lp/001/images/tick.png"/>
    </span>
    
    <span class="discount">BUY ONE | GET ONE 50% OFF + <span class="shipping">FREE SHIPPING </span><span class="total">($60 total)</span>
    </span>
    </span>
</label>

<!-- Banner 3 -->
<input type="radio" id="banner3" name="banner" value="http://jqueryui.com" />
<label class="banner banner3" for="banner3">
    <span class="banner-inner">
    <img  class="img" src="http://www.touchfire.com/lp/001/images/banner_3.png"/>
    <img class="img-free" src="http://www.touchfire.com/lp/001/images/bestGift.png"/>

    <span class="counter">3</span>
        
    <span class="title">Touchfires for $27<span class="ea" style="">ea</span>
   </span>
        
   <span class="tick" id="tick3">
        <img...

CSS

.container {
    padding: 20px;
}
.banner {
    display: block;
    height: 163px;
    margin-bottom: 20px;
    margin-top: 10px;
    cursor: pointer;
    border: 7px solid transparent;
    min-width: 956px;
    width: 956px;
    position: relative;
    opacity: 0.6;
}
.banner-inner {
    display: block;
    height: 100%;
    background-color: #2d2d2d;
}
.banner1 .img {
    margin-left:70px; 
    margin-top:30px; 
    float:left;
}
.banner1 .counter {
    float:left; 
    font: 80px/100% Arial, Helvetica, sans-serif; 
    color:#d37a80; 
    margin-top:40px; 
    margin-left:67px;
}
.banner1 .title {
    float:left; 
    font: 75px/100% Arial, Helvetica, sans-serif; 
    color:#c4c4c4; 
    margin-top:40px; 
    margin-left:20px;
}
.banner1 .cents {
    font: 25px/95% Arial, Helvetica, sans-serif; 
    color:#CCCCCC;
    
}
.banner1 .tick {
    float:left; 
    height:50px; 
    width:50px; 
    background-color:#0e0e0e; 
    margin-top:57px; 
    margin-left:25px; 
    border: 1px solid #3a3a3a;
}
.banner .tick img {
    display: none;
}
.banner1 .shipping {
    float:left; 
    margin-left:135px; 
    font: 29px/95% Arial, Helvetica, sans-serif  ; 
    color:#d37a80;
}
.banner1 .limited {
    font: 25px/95% Arial, Helvetica, sans-serif; 
    color:#d4d4d4;
}

.banner2 .img {
    margin-left:0px; 
    margin-top:0px; 
    float:left;    
}
.banner2 .label {
    float:left; 
    margin-left:-160px; 
    margin-top:-9px;
}
.banner2 .counter {
    float:left; 
    font: 80px/95% Arial, Helvetica, sans-serif  ; 
    color:#d37a80; 
    margin-top:40px; 
    margin-left:34px;
}
.banner2 .title {
    float:left; 
    font: 72px/100% Arial, Helvetica, sans-serif  ; 
    color:#c4c4c4; 
    margin-top:40px; 
    margin-left:20px;
}
.banner2 .ea {
    font: 15px/75% Arial, Helvetica, sans-serif; 
    color:#d37a80;
}
.banner2 .tick {
    float:left; 
    height:50px; 
    width:50px; 
    background-color:#0e0e0e; 
    margin-top:54px; 
    margin-left:15px; 
    border:...

JavaScript

$(document).ready(function() {
    $('input[name="banner"]').change(function() {
        $('label[for="'+this.id+'"]').addClass('selected');
        $('label[for="'+this.id+'"]').siblings().removeClass('selected');
    }).first().change();
$('#button').on('click', function(event) {
    $('#form').attr('action', $('input[name="banner"]:checked').val());
    $('#form').submit();
    return false;
});

});