JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div id="topbar"> <div class="clock"></div></div>
<div>
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 1</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 2</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 3</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 4</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 5</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 6</div>
    </div>    
    
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 7</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 8</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 9</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 10</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 11</div>
    </div>    
    
    <div class="iconblock"></div>
    <div class="textblock"><div class="woodTitle"></div>
        <div class="woodContent">content 12</div>
    </div>    
    
    <div class="iconblock"></div>
    <div...

CSS

html,body{margin:0; padding:0;}

body{
    background:url('http://vospascal.nl/apple_bg.jpg');
}

.clock{color:rgba(255,255,255,0.7);; widht:auto; height:auto;}
#topbar{height:auto; widht:100%; background: rgba(0,0,0,0.5); text-align:center; font-size:14px; padding-top:3px;}

.iconblock{width:82px; height:82px; background:#ccc; float:left; margin:10px; position:relative;}
.iconblock1{width:82px; height:82px; background:#ccc; float:left; margin:10px; position:relative;}

div.iconblock {
    -moz-transition: width 0.2s ease-out 0s;
    -webkit-transition: width 0.2s ease-out 0s;
    background: -moz-linear-gradient(-90deg, #FEFEFE, #9B9B9B) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(-90deg, #FEFEFE, #9B9B9B) repeat scroll 0 0 transparent;    
    border-radius: 10px;
    box-shadow: 0 -1px 0 #8D8D94, 0 1px 1px #0B0B0C;
    color: #000000;
    text-shadow: 0 1px 0 #FFFFFF;
    display: block;
    font: 14px "BebasNeueRegular",Helvetica,Arial,sans-serif;
    height: 82px;
    position: relative;
    width: 82px;
    z-index: 5;
    text-align:center;
}
.remove{
    background:#000;
    color:#fff;
    height:18px;
    width:18px;
    display:inline-block;
    position:absolute;
    top:-7px;
    left:-7px;
    font-weight:500!important;
    border-radius: 10px;
    border:1px solid #fff;
    box-shadow: 0 -1px 0 #8D8D94, 0 1px 1px #0B0B0C;
    font-family:"Arial", Times, serif;
    text-decoration:none;
    line-height:16px;
}
@-webkit-keyframes iconblock {
    from{
        -webkit-transform: rotate(3deg);
    -webkit-animation-timing-function:linear;
}50% {
    -webkit-transform: rotate(-3deg);
    -webkit-animation-timing-function: linear;
}to {
    -webkit-transform: rotate(3deg);
    -webkit-animation-timing-function: linear;    
}
}

@-moz-keyframes iconblock {
    from{
        -moz-transform: rotate(3deg);
    -moz-animation-timing-function:linear;
}50% {
    -moz-transform: rotate(-3deg);
    -moz-animation-timing-function:...

JavaScript

function rowCounting() {
    $('.iconlabel').remove();
    $('.iconblock').prepend('<span class="iconlabel"></span>');
//calculate nr of rows    
    var lasttop = 0;
    var row = -1;
    $('.iconblock').each(function(){
        var $this = $(this);
        var top = $this.offset().top;
        if (top > lasttop){
            lasttop = top;
            row++;
        }
        var rowNr = 'nextRow_' + row;
        $this.addClass(rowNr).text(rowNr);
    });  
}

$(document).ready(function(){rowCounting()});
$(window).resize(function(){rowCounting()});

                

$('.iconblock').mousedown(function(e) {
    clearTimeout(this.downTimer);
    var _this = $(this);
    this.downTimer = setTimeout(function() {
        //_this.prepend("<a href='#' class='remove'>x</a>");
        $('.iconblock').prepend("<a href='#' class='remove'>x</a>");
        $('.iconblock').addClass('wiggle');
    }, 1000);
}).mouseup(function(e) {
    clearTimeout(this.downTimer);
});

$(".remove").live('click', function() {
    $(this).closest('.iconblock').fadeOut("normal", function() {
        $(this).remove();
    });
});

$(document).click(function(e) {
    if (!$(e.target).is(".iconblock, .remove, .textblock")) {
        $(".remove").remove();
        $('.iconblock').removeClass('wiggle');
        $('.textblock').fadeOut('slow');
    }
});

$('.iconblock').live('click', function() {   
    $('.clonedItem').remove();
    var thisItem = $(this).attr('class').replace('iconblock ','');
    $(this).next('.textblock').clone().addClass('clonedItem').insertAfter("."+thisItem+':last').fadeIn('fast');
});

$(document).ready(function() {
    setInterval(function() {
        var currentDate = new Date();
        var cssNode = document.createElement('link');
        $(".clock").html(currentDate.toLocaleTimeString());
    },1000);     
});