JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<script src="http://fonts.googleapis.com/css?family=Oregano:400italic|Open+Sans+Condensed:300"></script>
what follows is a naigational link section that will move your browser to the perfect position. 
<div class="steps">
    <section id="one">
        <h1><a href="#one">One</a></h1>
        <div><p>hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one </p></div>
    </section>
    <section id="two" class="current">
        <h1><a href="#two">Two</a></h1>
        <div>hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 </div>
    </section>
    <section id="three">
        <h1><a href="#three">Three</a></h1>
        <div>hello 3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3 </div>
    </section>
</div>

CSS

body, .steps {position: relative; padding:0; margin: 0;  margin: 0 auto;}
.steps {
    width: 700px;
    border: dashed 1px grey;
    height: 1000px;
}
.steps section {
    position: absolute;
    top: 0;
    left: 0;
    border: solid 1px green;
}
.steps h1 { 
    position: absolute; 
    top: 0px; 
}
.steps h1 a {
    display: block;
    width: 230px;
    height: 60px;
    background-color: rgba(28,81,147,1);
    border: solid 1px rgba(28,81,147,1);
    border-bottom: solid 1px rgba(28,81,147,1);
    line-height: 60px;
    text-align: center;
    
    font-family: "Open Sans Condensed", "Arial Narrow", Arial, Tahoma, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    font-weight: normal;
}

.steps #one h1 a:after,
.steps #two h1 a:after {
    content: "";
    display: block;
    height: 43px;
    width: 43px;
    
    background-color: white;
    border-right: solid 1px orange;
    border-top: solid 1px orange;
    
    border-right: solid 1px rgba(0,46,110,1);
    border-top: solid 1px rgba(0,46,110,1);
    
    transform: rotate(0deg);
    transform: rotate(45deg);
    position: absolute;
    right:-21px;
    top:9px;
}

.steps .current h1 a,
.steps .current h1 a:after  {
    box-shadow: inset 1px 6px 4px -4px #000;
    text-shadow: 0 3px 1px #000;
}

.steps h1 a:after {box-shadow: 4px 0px 2px -2px #000;}
.steps #one h1 a,
.steps #one h1 a:after,
.steps #one div {
    background-color: rgba(28,81,147,1);
}
.steps #one h1 a:hover,
.steps #one h1 a:hover:after {
    background-color: rgba(18,71,137,1);
}

.steps #two h1 a,
.steps #two h1 a:after,
.steps #two div  {
    background-color: rgba(186,84,18,1)
}
.steps #two h1 a:hover,
.steps #two h1 a:hover:after {
    background-color: rgba(176,74,08,1)
}

.steps #three h1 a:hover,
.steps #three h1 a:hover:after,
.steps #three div  {
    background-color: rgba(218,186,113,1)
}
.steps #three h1 a,
.steps #three h1 a:after {
    background-color:...