JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div class="boat">
            <div class="dummy_border_container">
                <div class="dummy_border"></div>
            </div>
            <div class="left">
                <img src="http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x35.11.png" class="boat_thumb" />
                <div class="boat_name">
                    
                </div>
            </div>
            <div class="right">
                <div class="slider">fresh water</div>
                <div class="switch">salt water</div>
            </div> 
        </div>
    </div>
<div id="container"></div>

CSS

img{
    margin : 5px;
}

.boat{
    float : left;
    margin : 5px;
    width : 140px;
    height : 70px;
    border : 1px solid white;
     -moz-border-radius : 5px;
    -webkit-border-radius : 5px;
    -o-border-radius : 5px;
    -khtml-border-radius : 5px;
    -ms-border-radius : 5px;
    -pie-border-radius : 5px;
    border-radius : 5px;
    background-color :#1a1a1a;
    position : relative;
    color : #fff;
    cursor : pointer;
}

.boat .right{
    position : absolute;
    right : 0;
    top : 0;
    height : 100%;
    width : 30%;
    font-size: 10px;   
    text-transform : uppercase;
    
}
.boat .right .slider,
boat .right .switch{
    height : 50%;
    padding-top : 2px;
}
.boat .left{
    width : 70%;
    height : 100%;
    position : relative;
}
.boat .boat_name{
    position : absolute;
    left : 0;
    bottom : 2px;
    color : #fff;
    text-transform : uppercase;
    text-align : center;
    width : 100%;
}

JavaScript

var boatTemplate = $('<div class="boat"><div class="dummy_border_container"><div class="dummy_border"></div></div><div class="left"><img src="http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x35.11.png" class="boat_thumb" /><div class="boat_name"></div></div><div class="right"><div class="slider">fresh water</div><div class="switch">salt water</div></div> </div></div><div id="container"></div>');
var imgs =[
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x1.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x2.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x7.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x14.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x14v.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x15.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x25.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x35.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/xstar.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x45.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x55.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x80.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms200.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms255.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms215.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms225.11.png",
   ...