JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
    <div class="area active2">
        <span class="title">Area 3</span>
        <div id="moverTitle">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
         <div class="component active">
            <div id="mover">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
        </div>
        <div class="component active">
            <div id="mover">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
        </div>
    </div>
    
    <div class="area active2">
        <span class="title">Area 4</span>
        <div id="moverTitle">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
        <div class="component2 active">
            <div id="mover">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
        </div>
        <div class="component2 active">
            <div id="mover">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
        </div>
        <div class="component2 active">
            <div id="mover">
                <span class="glyphicon glyphicon-screenshot moveIt"></span>
            </div>
        </div>
    </div>    
    
</div>

CSS

body{margin:30px;}
.container{
    border: 1px dashed #656565;
    height:500px;
    width:400px;
    padding:15px;
}
.area{
    border: 2px dashed #ff6600;
    height:200px;
    width:93%;
    margin:15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.component{
    border: 2px dashed #5FB5AC;
    width:40%;
    float:left;
    height:150px;
    margin:15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display:block;
}
.component2{
    border: 2px dashed #5FB5AC;
    width:20%;
    float:left;
    height:150px;
    margin:15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display:block;
}
.active:hover{
    border-color:#C40030;
    border-width:2px;
}
.active2:hover{
    border-color:#C40030;
    border-width:2px;
}
#mover, #moverTitle {
	width: 22px;
    height: 22px;
    background-color:#ffffff;
    -moz-border-radius: 11;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    float: right;
    margin-top: -6px;
    margin-right: -6px;
    border: 1px solid #656565;
}
#mover, #moverTitle{
    display:none;
}
.active:hover #mover{
    display:block;
    padding:2px 0px 0px 4px;
    font-size:12px;
    color:#656565;
}
.moveIt:hover, #moverTitle:hover{
    color:#C40030;
    cursor:all-scroll;
}
.title{
    display:none;
}
.active2:hover .title{
    display:block;
    font-size: 11px;
    font-family: century gothic;
    border: 1px solid #656565;
    white-space: nowrap;
    padding: 2px 8px 2px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 10px;
    margin-top: -10px;
    margin-left:4px;
    background-color: #ffffff;
    position: absolute;
}
.active2:hover #moverTitle{
    display:block;
    padding:2px 0px 0px 4px;
    font-size:12px;
    color:#656565;
    margin-bottom: -16px;
}