JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolioFilter">
<h1>Dresses</h1>

    <p>Filter Products</p>
            
                    <ul class="proda">
	<li><a href="#" data-filter="*" class="current">All Categories</a></li><li>
	<a>Styles</a><b class="caret2"></b>
            <ul>
        <li><a href="#" data-filter=".slim" class="current">Slim</a></li>
        <li><a href="#" data-filter=".loose" class="current">loose</a></li>
        <li><a href="#" data-filter=".pro" class="current">proffesional</a></li>       
            </ul>               
    </li>
                        
	<li><a>Brands</a><b class="caret2"></b>
      <ul>
        <li><a href="#" data-filter=".ses" class="current">LA Sesso</li>
        <li><a href="#" data-filter=".isa" class="current">Issah</li>
        <li><a href="#" data-filter=".ant" class="current">Antonio</li>
      </ul>           
    </li>
	<li><a href="#" data-filter=".seas">Seasonal</a></li>
	<li><a href="#" data-filter=".bnew">New</a></li>
</ul>
</div>

        <div class="god">
<div class="portfolioContainer">

<div class="loose ses seas"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8613.jpg"/></a> </div> 
<div class="loose "><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8624.jpg"/></a> </div> 
<div class="loose"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8633.jpg"/></a> </div> 
<div class="Pro ant"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8643.jpg"/></a> </div> 
<div class="slim bnew"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8653.jpg"/></a> </div> 
<div class="slim seas"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8660.jpg"/></a> </div> 
<div class="slim bnew"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8674.jpg"/></a> </div> 
<div class="loose ses"><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8680.jpg"/></a> </div> 
<div class=" "><a href="/Pages/"><img src="/images/Products/Dresses/IMG_8694.jpg"/></a> </div> 
<div class="loose"><a...

CSS

.proda{
        display: table-row;
        list-style: none;
    }
.proda>li{
    position:relative;
}
    
    .proda li ul { 
        background: #ccc;
        display: none; 
        position:absolute;
        top:100%;
        left:0;
    }
    
    .proda li{
        display: table-cell;
        padding: 15px;
    } 
    
    .proda li a:hover{
        color: blue;
    }
    
    .proda li:hover ul { 
        display: block; 
        z-index: 1;
     }