JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <style>
          
        </style>
    </head>
    <body>
        <div>
            <div id="tdiv" >Top Div</div>
            <div id="connector">Middle Didv</div>            
            <div id="bdiv">Bottom Div </div>
        </div>        
    </body>
</html>

CSS

#tdiv{   
    
    height:200px; border:10px dotted black ;
    margin-bottom: -100px;   
    background:red;
        
}



#connector{
  
    height:200px;border:10px solid black;
    background:blue;
    margin-bottom: -100px;   
    z-index: 21;
        
}

#bdiv{
  
    border:21px dashed black;
    height:200px;
    z-index: 1;
    background:green;
}