JSFiddle - React, Tailwind, and code Playground

by rob_st

HTML

<nav id="submenu">
    <ul class="submenu">
        <li class="first">
            <img src="http://www.rauchmoebel.de/fileadmin/user_upload/images/landingpage/banner-landingpage/teaser/Teaser2_90px.jpg" alt=""><a href="http://www.rauchmoebel.de/index.php?id=335" title="Händlersuche">Unsere Handelspartner in Ihrer Nähe finden.</a>
        </li>
        <li class="second">
            <img src="http://www.rauchmoebel.de/fileadmin/user_upload/images/Logos/Logo_rauch_4c_90px.png" alt=""><a href="http://www.rauchmoebel.de/index.php?id=42" title="Marken">Die Markenwelt von Rauch.</a>
        </li>
        <li class="third"><a href="http://www.rauchmoebel.de/index.php?id=43" title="Stilwelten">Die Stilwelten von Rauch.</a>
        </li>
        <li class="fourth"><a href="http://www.rauchmoebel.de/index.php?id=44" title="Stiltypentest">Welcher Stiltyp sind Sie? Erfahren Sie es hier!</a>
        </li>
        <li class="last">
            <img src="http://www.rauchmoebel.de/fileadmin/user_upload/images/landingpage/abb_wohnbuch_start_2012_90px.png" alt=""><a href="http://www.rauchmoebel.de/index.php?id=738" title="Wohnbuch &quot;IMPULSE 2013&quot; bestellen">Wünschen Sie weitere Inspirationen? Bestellen Sie unser Wohnbuch IMPULSE.</a>
        </li>
    </ul>
</nav>

CSS

#submenu ul.submenu {
    display: block;
    float: left;
    padding-left: 0;
    margin: 0;
    border: 1px solid #000;
    width: 20em;
}
#submenu li {
    background: #ddd;
    padding: 0.5em;
    margin: 0;
    border-bottom: 1px dotted #000;
    list-style: none;
    overflow: hidden;
    /* position: relative; */
    display: block;
}
#submenu li img {
    float: left;
    width: 45px;
    margin-right: 0.5em;
}
#submenu a {
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}
#submenu li {
    list-style: none;
}