JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<nav class="themeNav">
    <div class="themeNavItem themeNavActive">
        <a href="#" class="themeNavLink">Åpne</a>
        <h2 class="themeNavTitle">Skolepenger fra elever og foresatte</h2>
        <span class="themeNavAssignee icon-a" data-icon="&#x007a;">SHO</span>
        <span class="themeNavPalegg icon-b" data-icon="&#x0022;">3</span>
    </div>
    
    <div class="themeNavItem">
        <a href="#" class="themeNavLink">Åpne</a>
        <h2 class="themeNavTitle">Annen virksomhet</h2>
        <span class="themeNavStatus themeNavStatusChecked icon-a" data-icon="&#x00d8;">Kontrollert</span>
        <span class="themeNavAssignee icon-a" data-icon="&#x007a;">SHO</span>
        <span class="themeNavPalegg icon-b" data-icon="&#x0022;">3</span>
    </div>
    
    <div class="themeNavItem">
        <a href="#" class="themeNavLink">Åpne</a>
        <h2 class="themeNavTitle">Krav til regnskap veldig lang tittel som kanskje fører til linje skift, men dette skal egentlig ikke skje</h2>
        <span class="themeNavStatus themeNavStatusFinished icon-a" data-icon="&#x00d8;">Ferdig</span>
        <span class="themeNavAssignee icon-a" data-icon="&#x007a;">SHO</span>
        <span class="themeNavPalegg icon-b" data-icon="&#x0022;">3</span>
    </div>

</nav>

CSS

body {
    font-family: Arial, sans-serif;
    padding: 40px;
}

@font-face {
    font-family: 'IcoMoon';
    src: url('https://dl.dropbox.com/s/zo8l769zo9uryb3/icomoon.woff?dl=1') format('woff');
    font-weight: normal;
    font-style: normal;
}


.icon-b, .icon-a, .icon {
    position: relative;
}
.icon-b:before, .icon-a:after, .icon:after {
    text-indent: 0;
    text-transform: none;
    content: attr(data-icon);
    font-family: 'IcoMoon';
    line-height: inherit;
    position: absolute;
    display: block;
    top: 1px;
    margin: 0 0 0 0;
    font-weight:normal;
    text-shadow:none;
    padding-top:inherit;
}
.icon-b {
    padding-left: 28px;
}
.icon-a 
{
    padding-right: 28px;
}
.icon {
    text-indent: -999px;
    overflow: hidden;
    white-space: nowrap;
}
.icon:after 
{
    margin-left: -0.5em;
    margin-top: 0px;
}
.icon-b::before
{
    left: 10px;
}
.icon-a::after
{
    right: 10px;
}

.icon-a-blue::after
{
    color:#05abe0;
}
.icon-b-blue::before
{
    color:#05abe0;
}

.themeNav {
    display: block;
    width: 50%;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 10px;
}



/** Theme nav */

.themeNavItem {
    display: block;
    margin-bottom: 10px;
    position: relative;
    overflow: auto;
    
    padding: 17px 15px 15px 15px;
    
    border: 1px solid #d5d5d5;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
    
    background: #f5f6f7; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f5f6f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f6f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f5f6f7...