JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="portal"> <!-- denne klassen ligger på body -->

<div class="colwrapper">
    <div class="quadruplecol">
        <nav class="portalsidemenu">
            <a href="#" class="portalsidemenuitem selected">Generelt om skolen</a>
            <a href="#" class="portalsidemenuitem">Utdanningens innhold</a>
            <a href="#" class="portalsidemenuitem">Videregående elevtall</a>
        </nav>
    </div>
    <div class="quadruplecoltriple">
        <div class="aboutsection">
            <h1>Generelt om skolen</h1>
            <div class="textblock">
                <p>Kartleggingsprøver er ikkje prøver i fag, men i grunnleggjande ferdigheiter i alle fag. Prøvene tek derfor ikkje berre utgangspunkt i kompetansemåla i norsk og matematikk, men også i andre fag der mål for lesing og rekning er integrerte. Kartleggingsprøvene er laga slik at dei har mange lette oppgåver og få middels eller vanskelege oppgåver. Prøvene har derfor ein såkalla ”takeffekt”. Kartleggingsprøvene fortel på den måten ikkje noko om elevar på ulike ferdigheitsnivå, men gir berre informasjon om kven av elevane som ligg under ei bekymringsgrense. Nasjonale prøver, derimot, gir informasjon om elevane på alle meistringsnivåa.</p>
            </div>
        </div>
        
        <div class="skjemakomponent skjemakomponent-kontrollspørsmål">
            <input type="checkbox" class="kontrollpunkt-checkbox" id="k1" />
            <div class="kontrollpunkt-tekst">
                <div class="textblock">
                    <p>Jeg bekrefter herved at jeg har nøye lest og forstått bacon <a href="#">§ 4-1</a></p>
                </div>
                <label class="kontrollpunkt-label" for="k1"></label>
            </div>
        </div>
        
        <div class="skjemakomponent skjemakomponent-organisasjonsform">
            <h2 class="skjemakomponent-tittel">Organisasjonsform</h2>
            <div class="textblock">
                <p>En beskrivelse som tilhører denne komponenten som kun skal...

CSS

/** BEGIN ignore **/

@font-face {
    font-family: "FiendstarLightRegular";
    src: url(http://www.udir.no/Udir/Frontend/css/type/fiendstar_light-webfont.woff);
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0; outline: 0;
}

body, html {
    font-family: Arial, Verdana, sans-serif;
    padding: 20px;
    font-size: 12px;
}

.quadruplecol {
    width: 25%;
}
.quadruplecoltriple {
    width: 75%;
}

.quadruplecol, .quadruplecoltriple {
    padding: 0 10px;
    float: left;

    -moz-box-sizing: border-box;    
    box-sizing: border-box;
}

.textblock {
    margin-top: 0;
    margin-bottom: 1.5em;
    font-size: 14px;
    color: #555;
}

.textblock p {
    line-height: 135%;
}

h2 {
    font-size: 14px;
    text-transform: uppercase;
    color: #666666;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    position: relative;
    margin-bottom: 20px;
}




/** END ignore **/

/* Basic styles, new and update old */
h1 {
    font-family: FiendstarLightRegular;
    font-weight: normal;
    padding: 0;
    margin: 0;
    font-size: 2em;
    margin-bottom: 1em;
}


/* Side menu */
.portalsidemenu {
    font-size: 1.1em;
    border-top: 1px solid #d7d4cb;
}

/* Menu item */
.portalsidemenuitem {
    position: relative;
    display: block;
    border-bottom: 1px solid #d7d4cb;
    padding: 10px 30px 9px 30px;
    
    color: #515151;
    text-decoration: none;
}
    .portalsidemenuitem:before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        left: 10px;
        top: 50%;
      ...

JavaScript

/* IGNORE: demo only */

$(".portalsidemenuitem").on("click", function(e) {
    $(".portalsidemenuitem").removeClass("selected");
    $(this).addClass("selected");
});