JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<table>
    <tr>
        <td class="f">
            <div class="handle"></div>
        </td>
        <td class="s"></td>
    </tr>
</table>

CSS

html, body, table{
    width:100%;
    height:100%;
}
table td{
    width:50%;
    height:100%;
}
.f{
    position:relative;
}
.s{
    background-color:#e9e9e9;
}

.handle{
    position:absolute;
    top:0;
    bottom:0;
    width:8px;
    border-left:1px solid #aaaaaa;
    border-right:1px solid #aaaaaa;
    right:0;
    
    background-color: #fdfdfd;
  background-image: -webkit-gradient(linear, left left, right right, from(#fdfdfd), to(#e4e4e4));
  background-image: -webkit-linear-gradient(left, #fdfdfd, #e4e4e4);
  background-image:    -moz-linear-gradient(left, #fdfdfd, #e4e4e4);
  background-image:      -o-linear-gradient(left, #fdfdfd, #e4e4e4);
  background-image:         linear-gradient(to rihgt, #fdfdfd, #e4e4e4);
}
.handle:before{
    content:"";
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-2px;
    margin-top:-5px;
    width:2px;
    height:2px;
    border:1px solid #acacac;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 0 1px 0 #fefefe;
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 0 1px 0 #fefefe;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 0 1px 0 #fefefe;
}