JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!-- site header -->
<h1>Headline</h1>

<!-- site content -->
<div>
    <!-- news section -->
    <section>
        <h2>News</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
    </section>
    
    <!-- download section -->
    <section>
        <h2>Downloads</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <ul>
            <li><a href="#">Hyperlink 1</a></li>
            <li><a href="#">Hyperlink 2</a></li>
            <li><a href="#">Hyperlink 3</a></li>
        </ul>
    </section>
</div>

<!-- site navigation -->
<nav>
    <a href="#list1">Collapse 1st list</a>
    <ul id="list1">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul>   
    <a href="#list2">Collapse 2nd list</a>
    <ul id="list2">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul>
    <a href="#list3">Collapse 3rd list</a>
    <ul id="list3">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul> 
</nav>

<!-- site footer -->
<footer>
    Footer
</footer>

CSS

/* -- normalize -- */
* { margin: 0 ; padding: 0 ; border: 0 none ; }
html, body { font-family: arial, sans-serif ; font-size: 80% ; }
section, nav { display: block ; }
ul { list-style: none ; }

/* -- global -- */
h1, body > div, nav, footer {
    padding: 1% ;
}

/* -- content -- */
body > div {
    float: left ;
    width: 68% ;
    background-color: #eee ;
}

section:not(:first-child) {
    margin-top: 10px ;
    padding-top: 10px ;
    border-top: 1px solid #ccc ;
}

section li {
    display: inline-block ;
}

/* -- navigation -- */
nav {
    float: right ;
    width: 28% ;
    background-color: #ddd ;
}

nav a {
    display: block ;
}

nav ul {
    position: absolute ;
    left: -9999px ;
}

nav ul:target {
    position: static ;
    left: auto ;
}

/* -- footer -- */
footer {
    clear: both ;
    background-color: #ccc ;
}