JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<div id="navigation">
    <div class="nav1">
    <a id="nav1" href="#">Link1</a>
    </div>
    <div class="nav2">
    <a id="nav2" href="#">Link2</a>
    </div>
    <div class="nav3">
    <a id="nav3" href="#">Link3</a>
    </div>
    <div class="navname">Link4<a id="navname" href="#"></a>
    </div>
</div>

CSS

/* Nav Button 1 */

.nav1 {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
}

#nav1
{
  display: block;
  width: 92px;
  height: 107px;
  background: url("images/triangle.png") no-repeat 0 0;

}

#nav1:hover
{ 
  background-position: 0 -107px;
}


/* Nav Button 2 */

.nav2 {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
    padding-right: 0px;
}

#nav2
{
  display: block;
  width: 92px;
  height: 107px;
  background: url("images/triangle.png") no-repeat 0 0;

}

#nav2:hover
{ 
  background-position: 0 -107px;
}

/* Nav Button 3 */

.nav3 {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
    padding-right: 0px;
}

#nav3
{
  display: block;
  width: 92px;
  height: 107px;
  background: url("images/triangle.png") no-repeat 0 0;

}

#nav3:hover
{ 
  background-position: 0 -107px;
}

/* Nav Name */

.navname {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
    padding-right: 0px;
}

#navname
{
  display: block;
  width: 228px;
  height: 81px;
  background: url("images/blank.png") no-repeat 0 0;

}