JSFiddle - React, Tailwind, and code Playground

by anatomic

HTML

<div class="content-pane-holder">
    
    <div class="content-pane current">
       <p>We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. The use of negative margins in web design is so divided that while some of us absolutely love it, there are also those who simply think it’s the work of the devil.</p>
   </div>
    
    <div class="content-pane">
        <p>A</p>
    </div>
    
   <div class="content-pane">
       <p>C</p>
   </div>
</div>

CSS

.content-pane-holder{
background-color:#f3f3f3;   
 height:auto;
 overflow:hidden;
 box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 max-width:420px;
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#333;
 line-height:1.5;
}

.content-pane{
    float:left;
    position:relative;
    width:10%;
}

.content-pane p{
    box-shadow:2px 0 2px rgba(0,0,0,0.1);
    margin-bottom:-9999px;
    padding-bottom:9999px;
    position:relative;
    width:100%;
    z-index:5;
    -webkit-transition:all 0.4s ease-in-out;
}

.content-pane p:hover{
     background:#f4f200;   
   z-index:2;
}

.content-pane.current{
    box-shadow:2px 0 2px rgba(0,0,0,0.1);
    width:80%;
    position:relative;
    z-index:50;
}
.current p{
 background-color:#fff;   
 margin:0;
 padding:0;
 height:auto;
}