JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js"></script>
    <div id="pr09470_box">
        <div class="pro9470_info">Jabra Pro 9470 Mono</div>
        <div class="rollover_information_9470">
            <ul>
                <li>10t taletid</li>
                <li>Fast, mobil, PC</li>
                <li>B&oslash;yle, &oslash;rekrok, nakkeb&oslash;yle</li>
                <li>Rekkevidde 150m</li>
                <li>St&oslash;ydempet mikrofon</li>
                <li>&Aring;pent kj&oslash;p</li>
            </ul>
        </div>
        <input type="checkbox" name="9470" id="jb9470" title="Velg Jabra Pro 9470">
    </div>
      <div class="labelwrap">
                <input type="checkbox" name="lorem" id="lorem">
                <label for="lorem">Lorem</label>
            </div>

CSS

#pr09470_box
{
    text-align: center;
    border: 1px solid #aaa;
    width: 45%;
    height: 180px;
    float: left;
    margin: 0 20px 10px 15px;
    background-image: url(http://www.headset.no/public/upload/9470_small.png);
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 5px;
    
}

.lease_highlight
{
    background: #a4b357; /* old browsers */
background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* ie */
    }

.pro9470_info
{
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* ie */
    text-align: center;
    color: #ddd;
}

.rollover_information_9470
{
    opacity: 0;
    background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* ie */
    height: 126px;
    padding-top: 20px;
    font-size: 14px;
}

.labelwrap
{
    float: left;
}

.tooltip {
    display:none;
    background: rgba(255, 255, 255, 0.7);
    border: 1px #849ab2 solid;
    border-radius:5px;
    -moz-border-radius:5px;
   ...

JavaScript

$("#jb9470[title]").tooltip({ effect: 'slide', position: 'top right'});

$(function() {
    //div "switcher"
    $("#pr09470_box").hover(function() {
        $(".rollover_information_9470").animate({'opacity': .85},100);
    }, function() {
        $(".rollover_information_9470").animate({'opacity': 0},500);
    });
});

$(function() {
    //checkbox
    $("input[type=checkbox]").change(function() {
        $(this).parent().toggleClass('lease_highlight');
    });
});