JSFiddle - React, Tailwind, and code Playground

HTML

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <div class="contact-column-wrapper">
                
                  <div class="contact-column">
                    <h1>A</h1>
                    <div class="name-control">
                    <div class="name">
                        <label for="sallyarmstrong">
                            <input type="checkbox" class="checkbox" name="sallyarmstrong">
                            Sally Armstrong ([email protected])
                        </label>  
                    </div> <!--/.name-->  
                    <div class="address-book-options">
                        <a href="#">Edit</a>    -   <a href="#">Remove</a>
                    </div><!--/.address-book-options-->    
                    </div><!--/.name-control-->
                  </div>   
  
            </div> 
            <!-- Column 1 end -->
        </div>
        <div class="col2">
            <!-- Column 2 start -->

            <div class="alphabet-column">
                <ul id="alphabet-list">
                    <li id="active"><a id="current" href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>       
            </div>

            <!-- Column 2 end -->
        </div>
    </div>
</div>

CSS

/* column container */
.colmask {
    position:relative;    /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;            /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}
/* 2 Column (left menu) settings */
.leftmenu {
    background:#fff;        /* right column background colour */
}
.leftmenu .colleft {
    right:75%;            /* right column width */
    background:#000;    /* left column background colour */
}
.leftmenu .col1 {
    width:71%;            /* right column content width */
    left:102%;            /* 100% plus left column left padding */
    overflow-y:scroll;    
}
.leftmenu .col2 {
    width:21%;            /* left column content width (column width minus left and right padding) */
    left:6%;            /* (right column left and right padding) plus (left column left padding) */
}



.alphabet-column {
  float: left;
  width:100%;    
  background-color:#000;  
  margin: 0;
  padding: 0;
  height:100%;
  }

.alphabet-column ul {
  margin:0 auto;
  width:100%;
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  font-family: Arial, Helvetica, sans-serif;
}

.alphabet-column li {
  margin: 0 auto 8px auto;    
  width: 20%;
  min-width:50px;
}

.alphabet-column a {
  display: block;
  padding: 3px;
  text-align: center;
  color:#fff;
  font-weight:bold;
  border:1px solid transparent;
}

.alphabet-column a:link, .alphabet-list a:visited {
  color: #fff;
  text-decoration: none;
}

.alphabet-column a:hover {
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  border:1px solid #fff;
  }

a#current {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #fff;
  }

.contact-column-wrapper...