JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="drag" class="ui-widget-content">
<div class="toggle"></div>
<div class="panel">
    <div class="panel-title">Control panel 1</div>
    <div class="button">Landing Gear</div>
    <div class="button-2">Action Group 1</div>
</div></div>

CSS

.drag {

}

.toggle{
    width:20px;
    height:20px;
    position: absolute;
    top: 2px;
    left: 355px;
    background-color:blue;
    z-index:1000;
       cursor: pointer;
}
.panel {
    background: url('http://i.imgur.com/nNyBDHE.png') no-repeat 5.882% 2.114%;
    width: 377px;
    height: 227px;
}
.panel-title {
    position: absolute;
    font-family:'Roboto', sans-serif;
    font-weight: 500;
    text-align: center;
    color: #CCC;
    font-size: 20px;
    position: absolute;
    height: 24px;
    left: 96px;
    width: 188px;
    top: 8px;
}
.button {
    font-family:'Roboto', sans-serif;
    padding-top: 5px;
    font-weight:500;
    text-align: center;
    color: #CCC;
    position: absolute;
    display: inline-block;
    cursor: pointer;
    top: 66px;
    background: url('http://i.imgur.com/nNyBDHE.png') no-repeat 3.784% 38.393%;
    width: 145px;
    height: 28px;
    left: 36px;
}
.button:hover {
    color: #999;
    background: url('http://i.imgur.com/nNyBDHE.png') no-repeat 3.777% 45.089%;
    width: 144px;
    height: 28px;
}
.button-2 {
    font-family:'Roboto', sans-serif;
    padding-top: 5px;
    font-weight: 500;
    text-align: center;
    color: #CCC;
    position: absolute;
    display: inline-block;
    cursor: pointer;
    top: 66px;
    background: url('http://i.imgur.com/nNyBDHE.png') no-repeat 3.784% 38.393%;
    width: 145px;
    height: 28px;
    left: 209px;
}
.button-2:hover {
    color: #999;
    background: url('http://i.imgur.com/nNyBDHE.png') no-repeat 3.777% 45.089%;
    width: 144px;
    height: 28px;

JavaScript

$( ".toggle" ).click(function() {
  $( ".panel" ).slideToggle( "fast" );
      });
      $(function () {
      $(".drag").draggable();
  });