JSFiddle - React, Tailwind, and code Playground

by Carlos Medina

HTML

<div class="wrapper">
        <div class="header">
            <img src="/images/logo.png" />
        </div>
        <div class="hline"></div>

        <div id="contentwrapper">
            <div id="contentcolumn">
                <div class="bs-container">

                </div>
            </div>
        </div>
        <div class="row">
          <div class="col-md-2"><!--ISSUE IS RIGHT HERE.-->
            <div class="user_menu">
                <div class="content">
                    <div class="header">
                        <img src="http://mta.everest-community.net/mta-image.php?id=1" />
                        <p>
                            <b><font color="#f7b618">123B3n</font> <font color="#334c66">(1)</font></b><br>
                            <a href="#">LOGOUT</a>
                        </p>
                    </div>
                    <div class="addMenu">
                        <ul>
                            <li><a href="#">HOME</a></li>
                            <li><a href="#" data-toggle="collapse" data-target="#characters">CHARACTERS <i class="fa fa-angle-down" aria-hidden="false"></i></a></li>
                            <div id="characters" class="collapse">
                                <li><a href="#" style="padding-left: 40px;">OVERVIEW</a></li>
                                <li><a href="#" style="padding-left: 40px;">STAT TRANSFER</a></li>
                                <li><a href="#" style="padding-left: 40px;">CUSTOM INTERIORS</a></li>
                                <li><a href="#" style="padding-left: 40px;">MANAGEMENT</a></li>
                            </div>
                            <li><a href="#" data-toggle="collapse" data-target="#account">ACCOUNT <i class="fa fa-angle-down" aria-hidden="false"></i></a></li>
                            <div id="account" class="collapse">
                                <li><a href="#" style="padding-left: 40px;">PROFILE</a></li>
                                <li><a...

CSS

.wrapper {
    padding-left: 68px;
    padding-right: 68px;
    width: auto;
    height: auto;
    margin: 0;
}

.header {
    padding-top: 16px;
    padding-bottom: 14px;
}

.hline {
    width:auto; 
    height:2px; 
    background: #FFFFFF; 
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

#contentwrapper{
    float: left;
    width: 100%;
}

#contentcolumn{
    margin-left: 325px;
}

/* USER MENU */

.menuWrap {
    padding-right: 65px;
    width: 260px;
}

.user_menu {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.5);
    border-width: 1px;
    margin-top: 41px;
    min-height: 390px;
    width: 260px;
    color: #a6bed5;
    background: rgba(110, 110, 110, 0.5); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* Standard syntax */
}

.user_after {
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 1px;
    margin-top: 17px;
    height: 39px;
    width: 260px;
    background: #6e6e6e; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #6e6e6e, #ebebeb); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #6e6e6e, #ebebeb); /* Standard syntax */
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

.user_menu .content {
...