JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<div class='wrapper'> 
    <div class='pagetabs'> 
        <div class='pagetab' id='tab_1'>Page 1</div> 
        <div class='pagetab' id='tab_2'>Page 2</div> 
    </div> 
    <div class='page page_active' id='page_1'> 
        <div class='column'> 
            <div class='box'>Box 1</div> 
            <div class='box'>Box 2</div> 
        </div> 
        <div class='column'> 
            <div class='box'>Box 3</div> 
        </div> 
        <div class='clear'></div> 
    </div> 
    <div class='page' id='page_2'> 
        <div class='column'> 
            <div class='box'>Box 4</div> 
            
        </div> 
        <div class='column'> 
            <div class='box'>Box 5</div>
            <div class='box'>Box 6</div> 
        </div> 
        <div class='clear'></div> 
    </div> 
    <div class='clear'></div> 
</div>

CSS

.wrapper {
        margin: 40px auto;
        width: 600px;
        border: 0px solid black;
    }
    .pagetabs {
        float:left;
        width: 100%;
        margin: 0 0 5px 0;
    }
    .pagetab {
        float:left;
        padding: 10px;
        border: 1px solid black;
        margin: 0 20px 0 0;
    }
    .pagetab_drop {
        background: #ddd;
    }
    .page {
        display: none;
    }
    .page_active {
        display: block;
    }
    .column {
        width: 280px;
        border: 1px solid orange;
        margin: 0 10px 0 0;
        padding: 0 0 40px 0;
        float:left;
    }
    .box {
        width: 280px;
        height: 100px;
        border: 1px solid blue;
        margin: 0 0 10px 0;
        background: #eee;
        clear:both;
    }
    .place_holder {
        width: 280px;
        height: 20px;
        background: #ddd;
        margin: 0 0 10px 0;
    }
    .clear {
        clear:both;
    }

JavaScript

$(document).ready(function() { 
 
    // THANKS FOR YOUR HELP :) - Whit
 
    $('.pagetab').click(function() {
        show_page(extract_id($(this).attr('id')));
    });
 
    $(".column").sortable({
        connectWith: '.column',
        opacity: 0.4,
        tolerance: 'pointer',
        placeholder: 'place_holder',
        helper: function(event, el) {
            var myclone = el.clone();
            $('body').append(myclone);
            return myclone;
        },
    }).disableSelection();
 
    $(".pagetab").droppable({
        over: function(event, ui) {
            $(".pagetab").removeClass('pagetab_drop');
            $(this).addClass('pagetab_drop')
            show_page(extract_id($(this).attr('id')));
        },
        out: function(event, ui) {
            $(".pagetab").removeClass('pagetab_drop');
        },
        tolerance: 'pointer'
    });
 
});
 
function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
}
 
function extract_id(str) {
    return str.substr(str.indexOf('_')+1,str.length+1);
}