JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gd_col">
        <div class="rat" id="clth">
            <!--<a class="nav_list">-->
            <div class="title_box">
                CLOTHING
                <span class="arrow_click"></span>
            </div>
            <div class="content_x">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM134e2axCCV2ugnDbtDyGIQcY2RTlYnU_6-skesMXm8CMIw5e" />
            </div>
            <!--</a>-->  </div>
        <div class="add_links" id="al_1">
            <ul>
                <li><a href="#">For Men</a></li>
                <li><a href="#">For Women</a></li>
                <li><a href="#">For Kids</a></li>
                <li><a href="#">Featured Deals</a></li>
                <li class="view_all"><a href="#" class="view_all_links">View All&nbsp»</a></li>
            </ul>
        </div>
    </div>

CSS

.add_links {
    display:none;
    height:184px;
    margin:-2px;
    padding: 15px;
    /*margin-left: 16px;*/
    color: #333;
    text-align: left;
    border: 2px solid yellow;
    background-color:black;
     overflow:hidden;
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;

}
.add_links:hover{
    opacity:.2;
}
.add_links ul li a{
    color:white;
}
.gd_col {
    margin-top: 16px;
    position: relative;
    width: 234px;
    margin-left: 14px;
    float: left;
    text-align: left;
    border: 1px solid #848484;
    background-color:black;
}
.title_box {
    background-color: #fff;
    opacity: .85;
    position: absolute;
    bottom: -2px;
    width: 224px;
    border: 1px solid #CCC;
    padding: 8px 0 8px 10px;
    font-size: 13px;
    color: #1a1a1a;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
    left: -1px;
    margin: 0;
}
.arrow_click {
    background: url('../images/menu_assets-1c9538a9.png') no-repeat -21px -2px;
    width: 8px;
    height: 11px;
    position: absolute;
    right: 8px;
    top: 9px;

}
.content_x {
    line-height: 0;
    font-size: 0;
    height: 216px;

}

.content_x a {
    color: #004b91;
    cursor: pointer;
}
#al_1{
   background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM134e2axCCV2ugnDbtDyGIQcY2RTlYnU_6-skesMXm8CMIw5e") no-repeat transparent;
}

.gd_col:hover>.add_links{
    display:block;
}
.add_links, .gd_col:hover>#clth{
    display:none;