JSFiddle - React, Tailwind, and code Playground

by magicdawn

HTML

<div class='parent'>
    <div class='menu'>
         <ul>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
             <li>asdfasdfs</li>
        </ul>
        
        <div class='flyout'>
          <h3>content here</h3>
          <p>asdjfhaksdfjhvaskdfhj</p>
        </div>
    </div>
</div>

CSS

.flyout{
    position:fixed;
    top:7px;
    left:477px;
}

.parent{
    position:absolute;
    top:0;
    max-height:200px;
    left:75px;
    display:block;
    background:red;
    border:blue 1px solid;
    height:1262px;
    width:400px;
    max-width:400px;
    z-index:1050;
    float:left;
}

.menu{
  height: 100%;
  overflow-y: auto;
}