JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div class="container">
  <div class="tv-container">TV</div>
    <div class="remote-container">
       <div class="vol-container">
                <p>
                Volume:<span id="vol-display">64</span>
                </p>
                <div aria-disabled="false"  id="vol-control">
                    <div style="height: 64%;"></div>
                    <a style="bottom: 64%;" href="#"></a></div>
                </div>
                <div id="main" class="main-container">
                    <div>
                       <p id="handle1"class="handle">tab heading</p>
                       <p id="handle2" class="handle">tab heading</p>
                    </div>
                    <div id="tab1" class="tab-container">
                    
                    <div class="tab-content">
                        Tab 1
                    </div>
                    </div>
                    <div id="tab2" class="tab-container">
                    
                    <div style="top: 40px;" class="tab-content">
                        Tab 2
                    </div>
                    </div>
            </div>
        </div>
    </div>

CSS

h1 { text-align:center;}
.container {
    width: 1000px;
    margin: 0 auto;
}
/*
    TV related styles
*/
.tv-container {
    border: 5px solid red;
    width: 100%;
    height: 400px;
    background: white;
    display:none;
}
/* 
    Remote related styles
*/
.remote-container{
    margin-top:30px;
    border: 5px solid black;
    height: 500px;
    width: 100%;
    background:white;
    overflow:hidden;
    position:absolute;
}
.vol-container {
    width: 19%;
    float:left;
}
.main-container {
    width:80%;
    float:left;
    border-left: 1px solid red;
    height:100%;
    padding:0px;
    overflow: hidden;
}
#vol-control {
margin:0 auto;
height: 300px;
}

/* tabs */
.tab-container {
    width:100%;
    height:100%;
    position:absolute;
    left:150px;
}
.handle{
height:50px;
width:10%;
position:absolute;
border: 1px solid blue;
    z-index:100;
/*-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);*/
cursor:pointer;
background:beige;
}

.tab-content {
border:1px solid purple;
float:left;
height:100%;
width:85%;
margin:0;
background:blue;
}

JavaScript

$(function(){
    var marginCounter = 0;
    $(".handle").each(function()
    {
        $(this).css({"margin-top": marginCounter});
        marginCounter = marginCounter + 55;
        
    });
    
    $( "#vol-control" ).slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100,
      value: 60,
      slide: function( event, ui ){
        $( "#vol-display" ).html( ui.value );
      }
    });
    $( "#vol-display" ).html( $( "#vol-control" ).slider( "value" ) );

    $(".handle").draggable({axis:"x",
        drag: function() {
           var id = $(this).attr("id");
           var tabNum = id.substring(id.length,id.length-1);
            $("#tab"+tabNum).css({left:$(this).position().left + $(this).width() });
        }

    });

  });