JSFiddle - React, Tailwind, and code Playground

by sajithgh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
<br/>
 
<br/>
<div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget">
                <ul class="steps">
                    <li class="complete" data-target="#simplewizardinwidgetstep1">Personal Information<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep3" class="active">Profile<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification1<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification2<span class="chevron"></span></li>
                </ul>
            </div>

CSS

.wizard ul
    {
        list-style: none outside none;
        padding: 0;
        margin: 0;
        width: 4000px;
    }
     

        .wizard ul li
        {
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 35px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 12px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease;
        }
         
            .wizard ul li .chevron
            {
                border: 24px solid transparent;
                border-left: 14px solid #d4d4d4;
                border-right: 0;
                 border-width: 18px 0 17px 14px;
                display: block;
                position: absolute;
                right: -14px;
                top: 0;
                z-index: 1;
            }

                .wizard ul li .chevron:before
                {
                    border: 24px solid transparent;
                    border-left: 14px solid #f5f5f5;
                    border-right: 0;
                    content: "";
                    display: block;
                    position: absolute;
                    right: 1px;
                    top: -24px;
                    -webkit-transition: all .218s ease;
                    -moz-transition: all .218s ease;
                    -o-transition: all .218s ease;
                    transition: all .218s ease;
                }

            .wizard ul li.complete
            {
                background: #f5f5f5;
                color: #444;
            }

                .wizard ul li.complete:before
                {
                    display: block;
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
          ...