Fiddles

by PhilQ

HTML

<div class="w">test</div>
<div class="e">test</div>
<div class="o">test</div>
<br />
<br />
<br />
<span class="a"><span class="b">Element #01</span></span>
<br />
<br />
<br />
<div class="arrow_box">Extra uitleg...</div>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,900,300italic,400italic,900italic);

body {
    font-family: 'PT Sans', sans-serif;
    background-color: #e0bb8f;
}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

div.w {
    background-color: #f9cdc7;
    border: 1px solid #c80000;
    color: #c80000;
}
div.e {
    background-color: #fcf9aa;
    border: 1px solid #ffcd05;
    color: #ffcd05;

}
div.o {
    background-color: #bff1c3;
    border: 1px solid #067c34;
    color: #067c34;
}
div.w, div.e, div.o {
    float: left;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 3px 8px;
    /* font-weight: bold; */
    font-size: .8em;
    ccolor: rgba(0,0,0, 0.7);
    text-shadow: 0px 1px 0 rgba(255,255,255, 0.3);
}

span.a {
    float: left;
    display: inline-block;
    height: 35px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,1);
    box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0, 0.2);
}
span.b {
    float: left;
    display: inline-block;
    color: #6e7177;
    text-shadow: 0 1px 0px rgba(255,255,255, 0.8);
    font-size: 0.8em;
    font-weight: bold;
    padding: 5px 10px;
    background: rgb(243,243,243);
background: -moz-linear-gradient(top,  rgba(243,243,243,1) 0%, rgba(224,224,224,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(100%,rgba(224,224,224,1)));
background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(224,224,224,1) 100%);
background: -o-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(224,224,224,1) 100%);
background: -ms-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(224,224,224,1) 100%);
background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(224,224,224,1) 100%);
filter:...