JSFiddle - React, Tailwind, and code Playground

by wittnl

HTML

<ul>
    <li>
        <a href="#">Foo</a>
        <div class="content">Slow-carb put a bird on it food truck YOLO, Schlitz farm-to-table kitsch. Semiotics cornhole 3 wolf moon umami, pug whatever Pinterest salvia tattooed gentrify 8-bit sartorial. You probably haven't heard of them four loko iPhone tofu, four dollar toast lo-fi Neutra meh flannel cornhole literally listicle. Biodiesel +1 freegan locavore farm-to-table crucifix, polaroid Thundercats drinking vinegar. Salvia biodiesel crucifix, irony seitan Godard selvage letterpress synth heirloom try-hard. Kickstarter farm-to-table forage actually, Brooklyn Bushwick food truck typewriter Schlitz brunch 90's tofu try-hard Helvetica. Banh mi +1 lomo fap retro, mixtape Shoreditch next level 90's Helvetica.

Bicycle rights cray ethical, chia Neutra ugh PBR&B pour-over Helvetica brunch sustainable. Salvia twee keytar church-key tattooed, chia Tumblr Bushwick jean shorts stumptown mustache sustainable paleo flannel. Master cleanse gastropub letterpress Thundercats lumbersexual Etsy flannel. Direct trade mixtape Intelligentsia messenger bag McSweeney's. Brooklyn heirloom actually YOLO Portland, asymmetrical XOXO seitan food truck keffiyeh. Kickstarter quinoa narwhal, swag locavore normcore health goth Neutra direct trade Helvetica wolf meditation next level Etsy Marfa. You probably haven't heard of them actually ethical small batch.</div>
    </li>
    <li>
        <a href="#">Bar</a>
        <div class="content">Slow-carb put a bird on it food truck YOLO, Schlitz farm-to-table kitsch. Semiotics cornhole 3 wolf moon umami, pug whatever Pinterest salvia tattooed gentrify 8-bit sartorial. You probably haven't heard of them four loko iPhone tofu, four dollar toast lo-fi Neutra meh flannel cornhole literally listicle. Biodiesel +1 freegan locavore farm-to-table crucifix, polaroid Thundercats drinking vinegar. Salvia biodiesel crucifix, irony seitan Godard selvage letterpress synth heirloom try-hard. Kickstarter...

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

ul {
    height: 100%;
    margin: 0; 
    padding: 0
}

li {
    min-height: 20%;
    display: block;
    margin: 0; 
    padding: 0;
}

li div.content { display: none; }

a {
    display: block;
    width: 100%;
    height: 0;
    min-height: 20%;
    text-decoration: none;
    color: #333;
    overflow: visible;
    padding-bottom: 10%;
}

a:visited {
    color: inherit;
}

a:focus + div.content {
    display: block;
}