JSFiddle - React, Tailwind, and code Playground

by lvo811

HTML

<div class="topnav-working subnav-getting">
<div id="nav">
    <ul id="top-nav">
        <li id="topnav-home"><a href="http://www.ameriprise.com/default-home.asp">Home<span></span></a>
            <div></div>
        </li>
        <li id="topnav-working"><a href="http://financial-planning.ameriprise.com">Working with Ameriprise<span></span></a>
            <div>
                <ul>
                    <li id="subnav-why" class="first"><a href="http://financial-planning.ameriprise.com/financial-planning-services/">Why Ameriprise</a></li>
                    <li id="subnav-getting"><a href="http://financial-planning.ameriprise.com/financial-planning-guide/">Getting Started with Ameriprise</a></li>
                    <li id="subnav-our"><a href="http://financial-planning.ameriprise.com/ameriprise-financial-advisors/">Our Advisors</a></li>
                    <li id="subnav-fees"><a href="http://financial-planning.ameriprise.com/financial-planning-fees/">Fees</a></li>
                    <li id="subnav-client"><a href="http://financial-planning.ameriprise.com/ameriprise-client-resources/">Ameriprise  Client  Resources</a></li>
                </ul>
            </div>
        </li>
        <li id="topnav-products"><a href="http://www.ameriprise.com/financial-products/">Products &amp; Services<span></span></a>
            <div>
                <ul>
                    <li id="subnav-financial" class="first"><a href="http://www.ameriprise.com/financial-products/financial-planning-basics/">Financial
                        
                        Planning</a></li>
                    <li id="subnav-banking"><a href="http://banking-credit.ameriprise.com">Banking &amp; Cash Management</a></li>
                    <li id="subnav-insurance"><a href="http://insurance.ameriprise.com">Insurance</a></li>
                    <li id="subnav-investments"><a href="http://investment.ameriprise.com">Investments</a></li>
                    <li id="subnav-lending"><a...

CSS

/* CORE CSS */
ul, ul li {
  list-style: none;
  padding: 0;
  margin: 0; }

.clr {
  clear: both; }

.bg-grad-blue, .ui-tabs-nav .ui-state-default {
  background: -webkit-linear-gradient(#0d426c, #3d6a87);
  background: -o-linear-gradient(#0d426c, #3d6a87);
  background: -moz-linear-gradient(100% 100% 90deg, #3d6a87, #0d426c);
  -pie-background: linear-gradient(100% 100% 90deg, #3d6a87, #0d426c);
  behavior: url(http://www.ameriprise.com/global/scripts/pie.htc); }

.bg-grad-gray, .sidebar {
  background: -webkit-linear-gradient(#bbbbbb, #eeeeee);
  background: -o-linear-gradient(#bbbbbb, #eeeeee);
  background: -moz-linear-gradient(100% 100% 90deg, #eeeeee, #bbbbbb);
  -pie-background: linear-gradient(100% 100% 90deg, #eeeeee, #bbbbbb);
  behavior: url(http://www.ameriprise.com/global/scripts/pie.htc); }

.ui-tabs-nav .ui-state-default.ui-tabs-selected {
  background: -webkit-linear-gradient(#bbbbbb, #eeeeee);
  background: -o-linear-gradient(#bbbbbb, #eeeeee);
  background: -moz-linear-gradient(100% 100% 90deg, #eeeeee, #bbbbbb);
  -pie-background: linear-gradient(100% 100% 90deg, #eeeeee, #bbbbbb);
  behavior: url(http://www.ameriprise.com/global/scripts/pie.htc); }

/* default tab */
.ui-tabs {
  position: relative;
  z-index: 10;
  /* .ui-tabs-nav */ }
  .ui-tabs .ui-tabs-nav {
    padding: 0;
    /*.ui-state-default */ }
    .ui-tabs .ui-tabs-nav .ui-state-default {
      float: left;
      width: 150px;
      margin-right: 10px;
      position: relative;
      z-index: 99;
      border-radius: 7px 7px 0 0;
      behavior: url(http://www.ameriprise.com/global/scripts/pie.htc); }
      .ui-tabs .ui-tabs-nav .ui-state-default a {
        text-decoration: none;
        color: #fff;
        display: block;
        width: 150px;
        height: 30px;
        text-align: center;
        color: #fff;
        outline: none; }
      .ui-tabs .ui-tabs-nav .ui-state-default.ui-tabs-selected {
        border-radius: 7px 7px 0 0;
        behavior:...