JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="main-menu" class="y-menu">
        <div class="y-menu-item" >
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed mollitia et labore sunt distinctio laboriosam numquam laborum doloribus ex animi at amet maiores, quaerat temporibus, exercitationem minima repellat quos eligendi!</div>
                    
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content"></div>

                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content"></div>

                </div>                    
                
            </div>
            
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p...

CSS

body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: Montserrat;
    color:#333;
}
p{
    font-size: 10pt;
}
.y-menu{
    padding: 20px;
    height: 80%;
    display: flex;
    flex-direction: column;
    
    justify-content: space-between;
    align-items: flex-start;
   
}

.y-menu-item{
    display: flex;
    flex-direction:row;
    align-items: center;
    padding: 20px;
    margin: 5px 0;
    border-radius:5px;
    /* background: #eee; */
    cursor: pointer;

}



.y-icon{
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background: #4E0BEF;
}

.y-s-icon{
    width: 40px;
    height: 40px;
    border-radius: 5px;

}
.y-texts-wrapper{
    margin-left: 20px;
    /* display: none; */
}

.y-normaltxt{
    width: 200px;

}
.y-menu-sublevel-1{
    display: none;
    position: absolute;
    margin-left: 84px;
    margin-top: 47px;
}

.y-menu-item-sublevel-1{
    display: flex;
    flex-direction:row;
    align-items: center;
    margin:0 0 10px 10px ;
}

@keyframes anim1{
    0% {width: 0;height: 0;opacity: 0;}
    50% {width: 250px;height: 250px;opacity: .5;}
    100% {width: 500px;height: 500px;opacity: 1;}
    
}

.y-content{
    width: 500px;
    height: 500px;
    top:20px;
    left:180px;
    padding:20px;
    color: #fff;
    background: #4E0BEF;
    position: fixed;
    display:none;
    text-align: center;
    animation: anim1 .1s ;
}

JavaScript

let menuItems =document.querySelectorAll(".y-menu-item");
menuItems.forEach((item)=>{
    item.addEventListener("click", function(event){
        document.querySelectorAll(".y-texts-wrapper,.y-menu-sublevel-1").forEach((txtw)=>{
            txtw.style.display='none';
        });
        
        item.children[2].style.display='block'
        
    })
})

/********************** */

let subMenuItems=document.querySelectorAll('.y-menu-item-sublevel-1');


subMenuItems.forEach((subItem)=>{
    subItem.addEventListener("click",function(){
      
        document.querySelectorAll(".y-sub-l1-ht,.y-content").forEach((ht)=>{
            ht.style.display='none';
        });
        subItem.children[2].style.display='block'
     
    });
})