JSFiddle - React, Tailwind, and code Playground

by bman654

HTML

<div class="outer">
    <div class="middle">
        <div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas imperdiet euismod. Maecenas vel ligula vel tortor volutpat scelerisque. Quisque vulputate semper risus, vel tempus quam ornare pulvinar. Aliquam id purus tortor. Maecenas ut arcu felis, sed sollicitudin risus. Nullam sed purus enim, sit amet pharetra quam. Duis nunc neque, pharetra sed auctor sit amet, feugiat id ipsum. Etiam venenatis auctor sodales. Etiam congue adipiscing lorem, ac tristique mauris tempor quis. Nulla ut purus nisl, eget dictum neque. Nulla sit amet aliquam mi.

Nullam elit nunc, pretium quis luctus sit amet, consectetur in dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris quis tortor nunc. Vestibulum tincidunt tempus ante, in venenatis est porta a. Nulla commodo tortor dolor. Proin vitae lectus felis. Nulla imperdiet ante ac augue lacinia porta iaculis velit feugiat. Donec interdum, neque sed bibendum mattis, metus diam sodales tellus, a fringilla purus erat non magna. Nam eu sem et dui volutpat semper sodales in eros. Maecenas in lectus id velit facilisis consequat. Nullam quis urna in arcu condimentum tristique ut vel erat. Duis at arcu lectus, a auctor tortor.
        </div>
    </div>
</div>
        
        <div class="outer">
            <table class="middle">
                <colgroup>
                    <col width="100%" />
                </colgroup>
                <tbody>
                    <tr>
                        <td>
                            <div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas imperdiet euismod. Maecenas vel ligula vel tortor volutpat scelerisque. Quisque vulputate semper risus, vel tempus quam ornare pulvinar. Aliquam id purus tortor. Maecenas ut arcu felis, sed sollicitudin risus. Nullam sed purus enim, sit amet pharetra quam. Duis nunc neque, pharetra sed auctor sit...

CSS

.outer {
    background-color: green;
    width: 250px;
    height: 250px;
    position: relative;
    margin-bottom: 5px;
}

.middle {
    position: absolute;
    top: 20%;
    bottom: 20px;
    left: 5px;
    right: 5px;
    background-color: blue;
}
.inner {
    width: 100%;
    height: 100%;
    background-color: red;
    overflow-y: auto;
}