JSFiddle - React, Tailwind, and code Playground

by tjdragon

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/FontAwesome.otf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.eot"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.svg"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.woff"></script>
<div class="progresscontainer">
    <ul class="progress">
        <li>    
            <span>Full name</span>
        </li>
        <li>
            <a href="#" class="">
                <span>1</span>
                <span>Demographics</span>
            </a>
            <ul class="submenu">
                <li>
                    <a href="#" class="">
                        <span>Sub Menu item</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="">
                        <span>Sub Menu item 2</span>
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="active">
                <span>2</span>
                <span>Primary Contact</span>
            </a>
        </li>
        <li>
            <a href="#" class="">
                <span>3</span>
                <span>Next step</span>
            </a>
        </li>
    </ul>
</div>

CSS

.progresscontainer{
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.progressplaceholder{
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 74%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    padding-right: 10px;
    margin-bottom: 100px;
    padding-bottom:100px;
}

.progress{
    width: 25%;
    min-width: 200px;
    max-width: 270px;
    font-family: verdana;
    font-size:0.8em;
    display: inline-block;
    position: relative;
    top: 0;
    margin-top: 100px;
}

.progress, .progress > li, .submenu, .submenu > li{
    list-style-type: none;
    padding: 0;
    box-sizing: border-box;
}

.progress > li{
    border: 1px solid #abab9d;
    border-bottom: none;
    border-left: none;
}
.progress > li:first-child:before{
    content: "\f007";
    display: block;
    height: 20px;
    font-size: 1.2em;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: grey;
}
.progress > li:first-child{
    text-align: center;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: none;
    border-right: none;
}

.progress > li:last-child{
    border-bottom: 2px solid #A9ACB0;
    -webkit-border-bottom-right-radius: 1px;
    -webkit-border-bottom-left-radius: 1px;
       -moz-border-radius-bottomright: 1px;
       -moz-border-radius-bottomleft: 1px;
            border-bottom-right-radius: 1px;
            border-bottom-left-radius: 1px;
}

.progress > li > a span:first-child{
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 5px;
    padding-top: 3px;
    border-radius: 50%;
    border: 1px solid #545658;
    text-align: center;
    color: white;
    background-color: #959589;
    margin-right: 5px;
}

.progress > li a{
    margin: 0;
    padding: 15px 10px;
    text-decoration: none;
    color: #959589;
    font-weight: bold;
    display: block;
    background-color: #D6D6C5;
}

.progress > li a.active{
  ...

JavaScript

$(".progress a").on("click",function(){
    $(this).parent().find(".submenu").toggle();
});