JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://caroufredsel.dev7studios.com/js/jquery/jquery.carouFredSel-6.0.5-packed.js"></script>
<div id="test-wrap">
    <div class="box">
        <div class="top">
            <div class="box_image_expand">
                <img src="/media/images/beams/view-fullscreen.png" />
            </div>
             <h3 class="beam-title">Amazing Deals</h3>

        </div>
        <!-- end div.top -->
        <div class="beam-container">
            <ul class="beam-list" id="">
                <li class="beam-item"> <a href="/board/beams/edit_beam/" class="beam-link">
          <div class="merchant-logo">
            <div class="bbticker">4</div>
            <img class="bimage" src="http://placehold.it/50x50/333/333.png" /> </div>
          <div class="bname">Apple</div>
          <div class="beam-message">Today and today only, get a FREE Mac Book Air at Apple.com! All you have to do is sign up, pay a one time registration fee of $1,800 and we will send you a FREE Mac Book Air.</div>
          <div class="beam-attachments">
            <div class="btn-group dropup"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">Attachments <span class="caret"></span></a>

                    <ul
                    class="dropdown-menu"> <a href="javascript:void(0);" target="_blank">Apple Offer PDF</a>

            </ul>
        </div>
    </div>
    </a>
    <div class="beam-links">
        <div class="btn-toolbar"> <a class="btn" data-beam-id="" data-toggle="tooltip" title="Open" href="javascript:void(0);"><span class="icon-eye-open"></span></a> 
            <!--
            open link --> <a class="btn" data-beam-id="" data-toggle="tooltip" title="BeamBack"
            href="javascript:void(0);"><span class="icon-share"></span></a> 
            <!-- beamback
            -->
            <div class="btn-group dropup"> <a class="btn dropdown-toggle"...

CSS

#test-wrap {
    width: 100%;
    float: none;
    clear: both;
    position: relative;
    padding-left: 5px;
}
.box {
    margin: 20px;
    min-height: 150px;
    position: relative;
    width: 350px;
    background: #fff;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 8px rgba(82, 168, 236, 0.6);
    border-radius: 2px;
    float: left;
}
.box_expanded_close {
    display: none;
}
.box_expanded_outside {
    position:fixed;
    top:2%;
    left:5%;
    width:90%;
    height:90%;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background: #00adef;
    z-index:10000;
    visibility:hidden;
    padding: 5px 2px 2px 5px;
}
.box_expanded_inside {
    width:100%;
    height:95%;
}
.box_expanded_title {
    height: 44px;
}
.box_iframe {
    width:100%;
    height:100%;
    border: 0;
}
.box .box_image {
    text-align: left;
    postion: relative;
}
.box .box_image img {
    margin: 10px 0 0 20px;
    text-align: left;
}
.box_image_expand {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 5px;
    z-index: 500;
}
.box_image_expand img {
    width: 25px;
}
.box_expanded_close {
    position: absolute;
    float: right;
    top: 10px;
    right: 15px;
    cursor: pointer;
}
.box.scrolling {
}
.box ul, .box li {
    margin: 0;
    list-style: none;
}
.box .top {
    height: 35px;
    background: #0093DA;
    border-radius: 2px 2px 0 0;
    position: relative;
}
.box .top h3 {
    margin: 0;
    padding: 0 0 0 10px;
    font-size: 16px;
    line-height: 35px;
    color: #fff;
}
.beam-container {
    position: relative;
    padding: 0px;
}
.caroufredsel_wrapper {
    width: 100%;
    padding: 0px !important;
}
.box .beam-list, .box .beam-list li {
    margin: 0 !important;
    float: none;
    line-height: inherit;
    vertical-align: inherit;
}
.box .beam-list li:hover...

JavaScript

$(document).ready(function () {


    $(".box").each(function () {
        // only for categories with more then 4 items do we want to create the carousel or thumbs tray
        if ($(this).find(".beam-item").length > 3) {

            // add class so we can target scrolling / non-scrolling boxes
            $(this).closest(".box").addClass("scrolling");

            $(this).find(".beam-list").carouFredSel({
                direction: "up",
                items: {
                    visible: {
                        min: 4,
                        max: 4
                    }
                },
                scroll: {
                    items: 1,
                    easing: "linear",
                    pauseOnHover: "immediate-resume"

                },
                auto: {
                    items: 4,
                    duration: 20000,
                    easing: "linear",
                    timeoutDuration: 0,
                }
            }); // close caroufredsel
            // let's create some thumbs for 
            var thumbs = [];
            var thumb = '';
            $(this).find('.beam-item').each(function () {
                var src = $(this).find(".beam-link").attr("href"),
                    image = $(this).find(".bimage").attr("src");
                thumb += '<a href="' + src + '" class="beam-thumb"><img src="' + image + '" alt="" /></a>';
            }); // end beam-item each

            thumbs.push(thumb);
            $(this).find(".beam-thumbs").append(thumb);
            var count = $(this).find(".beam-item .bimage").length;
            $('.beam-count').html("+ " + count);
            //alert($(this).find(".beam-item").length);
        } // end if > 4
    }); // end each	box

    $(".beam-next").click(function () {
        $(this).parent().find(".beam-list").trigger("configuration", ["stop", "immediate"]);
        //    $(this).parent().find(".beam-list").trigger("configuration", ["direction", "up"]);
    });
   ...