JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<ul class="tabs primary">
<li><a href="/admin/content/node-type/project">Edit</a></li>
<li><a href="/admin/content/node-type/project/fields">Manage fields</a></li>
<li class="active"><a href="/admin/content/node-type/project/display" class="active">Display fields</a></li>
<li><a href="/admin/content/node-type/project/template">Template</a></li>
<li><a href="/admin/content/node-type/project/template">Template</a></li>
<li><a href="/admin/content/node-type/project/template">Template</a></li>
<li><a href="/admin/content/node-type/project/template">Template</a></li>
</ul>
<ul class="tabs secondary">
<li class="active"><a href="/admin/content/node-type/project/display" class="active">Basic</a></li>
<li><a href="/admin/content/node-type/project/display/rss">RSS</a></li>
<li><a href="/admin/content/node-type/project/display/search">Search</a></li>
<li><a href="/admin/content/node-type/project/display/token">Token</a></li>
</ul>

CSS

body {
    background-color: #cfc4b9;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

ul.tabs.primary {
    overflow: hidden;
    border: none;
    margin: 0 20px;
}

.ie6 ul.tabs.primary li,
.ie7 ul.tabs.primary li {
    display: inline;
}

ul.tabs.primary li {
    position: relative;
    bottom: -2px;
    display: inline-block;
    margin:0 1px;
    -webkit-transition: all .2s ease-out;  
       -moz-transition: all .2s ease-out;  
         -o-transition: all .2s ease-out;  
            transition: all .2s ease-out;  
}

ul.tabs.primary li:hover {
    bottom: 0;
}

ul.tabs.primary li.active:before,
ul.tabs.primary li.active:after {
  content:'';
  width:9px;
  height:8px;
  position:absolute;
  z-index:2;
  bottom:0;
  background-color: #fff;
}

ul.tabs.primary li.active {
    bottom: 0;
    margin:0 4px;
}

ul.tabs.primary li:before {
  left:-8px;
}

ul.tabs.primary li:after {
  right:-8px;
}

ul.tabs.primary li a {
    border: none;
}

ul.tabs.primary li.active a {
    border: none;
    background-image: none;
    background-color: #fff;
}

.ie6 ul.tabs.primary a,
.ie7 ul.tabs.primary a {
    display: inline;
}

ul.tabs.primary a {
    display: block;
    padding: 4px 10px;
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(255,255,255,.6)),
        color-stop(.05, rgba(255,255,255,.4)),
        to(rgba(255,255,255,0)));
    background-image: -moz-linear-gradient(top,
        rgba(255,255,255,.6),
        rgba(255,255,255,.4) 5%,
        rgba(255,255,255,0));
    background-image: linear-gradient(top,
        rgba(255,255,255,.6),
        rgba(255,255,255,.4) 5%,
        rgba(255,255,255,0));
    background-color: #ddd;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    -webkit-border-top-right-radius: 4px;
     -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topright: 4px;
         -moz-border-radius-topleft: 4px;
            border-top-right-radius: 4px;
            ...