JSFiddle - React, Tailwind, and code Playground

by HerrSerker

HTML

<form>
     
            <fieldset class="scroll">
                <legend>Scroll:</legend>
                <div>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                    This is just some content. <br>
                </div>
            </fieldset>
        </form>

CSS

fieldset
{
    border: 1px solid #DEDDDD;
    border-radius: 5px 5px 5px 5px;
    position: relative;
    white-space: nowrap;
    margin: 40px 20px 20px 20px;
    display: inline-block;
    /* lte IE8 hack */
    *zoom: 1;
    *display: inline
        
}

legend
{
    font-weight: bold;
    margin-left: 5px;
    position: absolute;
    height: 20px;
    top: -25px; /* - (height + padding-top + border-top */ 
    left: -6px;
    background: white;
    padding: 4px 10px 0 10px;
    border: 1px solid #DEDDDD;
    border-bottom-color: white;
}

.scroll div
{
    max-height: 180px;
    overflow: auto;
    overflow-x: hidden;
    padding: 10px 20px 10px 10px;
    position: relative;
}