JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_block">
	
	<div class="title_block_catalog">Освещение для дома</div>
	<div class="category_block">
		<div class="second_cat">
			<a class="second_link" href="#">LED лампы</a>
		</div>
		<div class="third_category">
			
			
		</div>
	
	</div>
	
	
	<div class="category_block">
		<div class="second_cat">
			<a class="second_link" href="#">LED лампы</a>
		</div>
		<div class="third_category">
			<ul>
				<li>
				111111
				</li>
				<li>
				111111
				</li><li>
				111111
				</li><li>
				111111
				</li><li>
				111111
				</li>
			</ul>
			
		</div>
	
	</div>
	
	<div class="category_block">
		<div class="second_cat">
			<a class="second_link" href="#">LED лампы</a>
		</div>
		<div class="third_category">
			<ul>
				<li>
				111111
				</li>
				<li>
				111111
				</li><li>
				111111
				</li><li>
				111111
				</li><li>
				111111
				</li>
			</ul>
			
		</div>
	
	</div>
	

</div>

CSS

.main_block{
		  overflow: hidden;
		  position: relative;
		  z-index: 1;
		  transition: all 0.3s linear;
		  z-index:1;
		 

		  
		
	}
	
	.main_block:after{
		  content: "";
		  display:block;
		   height:200px;
		  background: url('shadow.svg');
		  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 34%, #ffffff); 
		  position: absolute;
		  top: 70px;
		  left: 0px;
		 
		  width: 100%;
		  -webkit-transition: opacity 0.3s linear;
		  z-index:1;	
	}
	
	.main_block:hover{
		overflow:visible;
		z-index:2;
		cursor:pointer;
		
	
	}
	
	.title_block_catalog{
		font-size: 30px;
		color: #8cc63f;
		padding: 0;
	}
	
	.second_link{
	font-size: 22px;
	text-decoration:none;
	COLOR: #434343;
	}
	
	.second_cat{
		border-bottom:2px solid #f1f1f1;line-height:40px;
	}
	
	.category_block{
		//float:left;
		margin-right:50px;
	}
	ul li{
		float:left;
	}
	.third_category{
		
		width:200px;
	
	}