JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div class="wrapper">
        <nav role="navigation">
                <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Visit Us</a></li>
                        <li><a href="#">What’s on</a></li>
                        <li><a href="#">Contact Us</a></li>
                </ul>
        </nav>
        <p>No images were harmed in the making of this CSS ribbon</p>
</div>

CSS

body{font:16px/1.5 Arial, Helvetica, sans-serif}
.wrapper{margin:0 auto;width:960px;background:#f2f2f2}
nav[role=navigation]{position:relative;margin:0 -11px 0 -11px;padding:5px 20px 5px;background:#003055;border-left:1px solid #001d33;border-right:1px solid #001d33;-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 rgba(0,0,0,0.2)}

/* These 2 lines are the meat and potatoes of this example */
nav[role=navigation]:before{content:"";position:absolute;bottom:-10px;left:0;width:0;height:0;border:5px solid #001322;border-bottom:5px solid transparent;border-left:5px solid transparent;crop:rect(0, 5px, 5px, 0)}
nav[role=navigation]:after{content:"";position:absolute;bottom:-10px;right:0;width:0;height:0;border:5px solid #001322;border-bottom:5px solid transparent;border-right:5px solid transparent;crop:rect(0, 5px, 5px, 0)}

ul{margin:0}
li{display:inline}
a{padding:0 .5em;color:#fff;border-right:1px solid #999;text-decoration:none;text-shadow:0 -1px #001d33, 0 1px #001322}
a:hover,a:focus,a:active{background-color:#003055;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;text-decoration:underline}