JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<body>

<div class="wizard">
    <div class="wrapper-large wizard-list clearfix">
        <a href='@Url.Action("Report", "Report" )'><u>Continue later</u></a>
    </div>
    <ul class="wrapper wizard-list clearfix">
        <li id="wizard-home" class="wizard-item ">
            <a href='@Url.Action("Index", "Home" )'>
                <span class="wizard-name">Home</span>
            </a>
        </li>
        <li id="wizard-home" class="wizard-item">
            <div class="wizard-item">
            </div>
        </li>
        <li  class="wizard-item">
                <a id="firstMenu" href=''>
                 <div>
                        <span class="wizard-name">Main Menu Item1</span>
                        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z" /></svg>
                    </div>   
                </a>
        </li>    

        <li  class="wizard-item">
                <a id="secondMenu" href=''>
                 <div>
                        <span class="wizard-name">Main Menu Item2</span>
                        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z" /></svg>
                    </div>   
                </a>
        </li>   
<li  class="wizard-item">
                <a id="secondMenu" href=''>
                 <div>
                        <span class="wizard-name">Main Menu Item3</span>
                        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z" /></svg>
                    </div>   
                </a>
        </li>   
<li  class="wizard-item">
                <a...

CSS

.wizard {
    padding: 8px 0;
    border-bottom: 1px solid #b0cee2;
}

.wrapper-large {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

.wizard-list {
  list-style: none;
  text-align: center;
}

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

.wizard-item {
  float: left;
  width: 9%;
  position: relative;
}
.wizard-name {
  color: black;
  font-size: 14px;
}