JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="dashboard-default">
    <div class="dashboard-edit">
        <div class="panelTitle"><span class="glyphicon glyphicon-plus"></span> Click to add a title</div>
        <div class="panelObtions">
            <div class="optPanel"><span class="glyphicon glyphicon-resize-full"></span></div>
            <div class="optPanel"><span class="glyphicon glyphicon-cog"></span></div>
            <div class="optPanel"><span class="glyphicon glyphicon-remove"></span></div>
        </div>
    </div>
    <div class="time-widget-classic">
        <div id="timeId" class="time">14:55:42</div>
        <div id="dayId" class="day">Monday</div>
        <div id="dateId" class="full">Jully 13</div>
    </div>
</div>

<script src="//code.interactjs.io/interact-1.2.4.min.js"></script>

<div class="resize-container">
  <div class="resize-drag">
    <div class="dashboard-default">
    <div class="dashboard-edit">
        <div class="panelTitle"><span class="glyphicon glyphicon-plus"></span> Click to add a title</div>
        <div class="panelObtions">
            <div class="optPanel"><span class="glyphicon glyphicon-resize-full"></span></div>
            <div class="optPanel"><span class="glyphicon glyphicon-cog"></span></div>
            <div class="optPanel"><span class="glyphicon glyphicon-remove"></span></div>
        </div>
    </div>
    <div class="time-widget-classic">
        <div id="timeId" class="time">14:55:42</div>
        <div id="dayId" class="day">Monday</div>
        <div id="dateId" class="full">Jully 13</div>
    </div>
</div>

  </div>
</div>

CSS

body {
    margin:30px;
    font-family:'century gothic';
}
.dashboard-default {
    min-width:250px;
    height:100%;
    display:block;
    cursor:pointer;
    padding:2px;
}
.dashboard-default:hover .dashboard-edit {
    display:block;
}
.dashboard-default:hover {
    padding:0px;
    border: 2px dashed #CFCACA;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.dashboard-default .dashboard-edit {
    display:none;
}
.time-widget-classic {
    width:100%;
    margin-top:30px;
}
.time-widget-classic .time {
    font-size: 45px;
}
.time-widget-classic .day, .time-widget-classic .full {
    font-size: 13px;
    line-height: 13px;
    padding: 6px 0px 0px 5px;
}
.time-widget-classic .full {
    margin-bottom:3px;
}
.panelTitle {
    font-weight:700;
    color:#CFCACA;
    padding:5px;
    width:80%;
    float:left;
}
.panelTitle span {
    font-size:12px;
}
.panelObtions {
    float:right;
    width:25px;
    margin:10px;
}
.optPanel {
    float: right;
    padding: 3px 4px 4px 5px;
    width: 25px;
    font-size: 12px;
    height: 25px;
    border: 1px solid #CFCACA;
    border-radius: 12.5px;
    color:#CFCACA;
    margin:2px;
    z-index:9999;
}
.optPanel:hover {
    border: 1px solid #999;
    border-radius: 12.5px;
    color:#999;
    cursor:pointer;
}


.resize-drag {
  border-radius: 8px;
    min-height:140px;
  width: 250px;
  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 100%;
  height: 240px;
}

JavaScript

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  });