JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<div id="myMenu">
    <ul class="myList">
        <li>Batman</li>
        <li>Superman</li>
        <li>Spiderman</li>
        <li>Iron Man (the best)</li>
        <li>Green Hornet</li>
        <li>Plastic Man</li>
        <li>Captain America</li>
        <li>Thooooor</li>
        <li>The Hulk</li>
        <li>Green Lantern</li>
        <li>The Flash</li>
        <li>That weird one with the kids and rings...</li>
        <li>Are Powerrangers superheroes?</li>
        <li>Lazers yay!</li>
        <li>And guitar solos!</li>
        <li>I wish I were superhero</li>
        <li>Kickass suuucked</li>
        <li>Oohh! War Machine :D</li>
    </ul>
</div>

CSS

html, 
body
{
    height:100%;
}

#myMenu 
{
    border: 1px dashed #333;
    width:200px;
    height:100%;
    color: #333;
    padding: 5px;
}

#myMenu ul.myList 
{
    height: 100%;
    overflow: auto;
}