JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="wdc" id="tabs">
    <div class="wdc_c">
        <div class="wdc_cont">
             <div id="tabs-1">
                tabs-1
              </div>
              <div id="tabs-2">
                tabs-2
              </div>
              <div id="tabs-3">
               tabs-3
              </div>
        </div>
    </div>
    <aside class="wdc_p">
        <div class="wdc_cont">
           <ul>
                <li><a href="#tabs-1">tabs-1</a></li>
                <li><a href="#tabs-2">tabs-2</a></li>
                <li><a href="#tabs-3">tabs-3</a></li>
          </ul>
        </div>
    </aside>
</div>

CSS

*{margin:0;padding:0;}
.wdc{}
.wdc_c{background:#FAFAFA;float:right;width:80%;box-shadow:0 0 18px #616161;}
.wdc_p{overflow:hidden;background:#0199D8;}
.wdc_c ,.wdc_p{height:100vh;}
.wdc_cont{padding:10px;}

JavaScript

$(function() {
    $( "#tabs" ).tabs();
  });