JSFiddle - React, Tailwind, and code Playground

by vinie

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-12 margin-left-100" id="sortable">
<!--    <div class="hex-row" id="row1">-->
    <div id="c_1" class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
        </div>
    </div>
</div>
<div id="c_2"  class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
        </div>
    </div>
</div>
    <div id="c_3"  class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
        </div>
    </div>
</div>
    <div id="c_4"  class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
        </div>
    </div>
</div>

<!--    <div class="hex-row even" id="row2">-->
<div id="c_5"  class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
        </div>
    </div>
</div>
<div id="c_6"  class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa...

CSS

.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon-in2{
    background: #6B6A6A;
    }

.hexagon1 {
    width: 200px;
    height: 100px;
    margin: 0 0 0 -80px;
    }
.hexagon2 {
    float: left;
    width: 80px;
    height: 117px;
    margin: -20px 0 0 20px;
    }
.inner{position: relative;color: #FFF; display: none; padding-top: 6px; background: #009999;width: 50px;width: 34px;height: 32px;border-radius: 25px;}
.inner-right{top: 98px;left: 116px;}
.inner-left{top: 130px;left: 10px;}
#kinglinkr{background: red}
#sortable{width: 100%;}
#sortable .hexagon:nth-child(1) {
    margin-left: 66px;
} 
div#sortable .hexagon:nth-child(5) {
    margin-left: 5px;
} 
div#sortable .hexagon:nth-child(10) {
    margin-left: 50px;
} 
div#sortable .hexagon:nth-child(14) {
    margin-left: 100px;
}

JavaScript

$(document).ready(function() 
$("#sortable").sortable({
        cursor: 'move',
        items: 'div.sort',
        }).disableSelection();
});