JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Tabs - Vertical Tabs functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
        $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    });
    </script>
  
</head>


<div id="tabs">

        <ul class="accordion">
            
            <li class="files">

                <a href="#one">Compose Message</a>
            </li>
            
            <li class="mail">

                <a href="#two">Inbox<span>26</span></a>
            </li>
            
            <li class="cloud">

                <a href="#three">Sent<span>58</span></a>
            </li>
            
            <li class="sign">

                <a href="#four">Trash</a>
            </li>
        
        </ul>
        <div id="one">
        <p>Compose now!!!</p>
        </div>
        <div id="two">
        <p>Inbox woman!!!</p>
        </div>
        <div id="three">
        <p>Sent man!!!</p>
        </div>
        <div id="four">
        <p>Trash man!!!</p>
            <table style="background-color:#F2F2F2;" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="732" valign="top">
  <h2 style="margin-left:24px;">Messages You Trashed</h2>

<form name="myform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
        <table width="94%" border="0" align="center" cellpadding="4">
          <tr>
            <td width="3%" align="right" valign="bottom"><img src="images/crookedArrow.png" width="16" height="17" alt="Develop PHP Private Messages" /></td>
            <td...

CSS

ui-tabs-vertical { width: 55em; }
    .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 8em; }
    .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
    .ui-tabs-vertical .ui-tabs-nav li a {  }
    .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
    .ui-tabs-vertical .ui-tabs-panel { padding: 1em;  width: 40em;}


.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.accordion li {
    list-style: none;
}

/* Layout & Style */

.accordion li > a {
    display: block;
    position: relative;
    min-width: 110px;
    padding: 0 10px 0 40px;
    height: 52px;
    width: 60px;
    padding:15px;
    color: #fdfdfd;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);

    background: #6c6e74;
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
    color: #3e5706;
    text-shadow: 1px 1px 1px rgba(255,255,255,...

JavaScript

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
        $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});