JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <td>Version Nr.1
            <ul class="reset dorams">
                <li>
                    <div class="li_poster"><a href="http://google.com" target="_blank"><img src="http://www.logodesignlondon.co.uk/wp-content/uploads/2013/12/google.jpg" alt="google" title="google"/></a><span class="opt"></span>
                    </div>
                </li>
            </ul>
        </td>
        <td>Version Nr.2
            <ul class="reset dorams">
                <li>
                    <div class="li_poster2"><a href="http://google.com" target="_blank"><img src="http://www.logodesignlondon.co.uk/wp-content/uploads/2013/12/google.jpg" alt="google" title="google"/></a><span class="opt"></span>
                    </div>
                </li>
            </ul>
        </td>
    </tr>
</table>

CSS

ul.dorams {
    overflow: hidden;
    margin: -5px -7px -5px -4px;
}
ul.dorams li {
    width: 192px;
    display: block;
    float: left;
    margin: 0 4px 5px 0;
    position: relative;
    overflow: hidden;
}
ul.dorams li .li_poster {
    padding: 4px 4px 1px 4px;
    border: 2px solid rgba(240, 240, 240, 1);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position: relative;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
    box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
}
ul.dorams li .li_poster img {
    width: 180px;
    height: 150px;
}
ul.dorams li .li_poster span.rate {
    z-index: 2;
    display: block;
    font-size: 15px;
    padding: 5px 5px;
    position: absolute;
    bottom: 7px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 0 #b54545;
    background: #ff6161;
    right: 7px;
}
ul.dorams li:hover .li_poster span.opt {
    pointer-events:none;
    display: block;
    position: absolute;
    width: 180px;
    height: 150px;
    background: rgba(0, 0, 0, 0.66) url(../images/plus_4.png) no-repeat center center;
    top: 4px;
    left: 4px;
    z-index: 3;
}
ul.dorams li:hover .li_poster:hover span.opt {
    background: rgba(0, 0, 0, 0.66) url(../images/plus_3.png) no-repeat center center;
}
/*---V2---*/
 ul.dorams li .li_poster2 {
    padding: 4px 4px 1px 4px;
    border: 2px solid rgba(240, 240, 240, 1);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position: relative;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
    box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
}
ul.dorams li .li_poster2 img {
    width: 180px;
    height: 150px;
}
ul.dorams li .li_poster2 span.rate {
    z-index: 2;
  ...