JSFiddle - React, Tailwind, and code Playground

by zaknotzak

HTML

<div id="nav">
<nav role="navigation">
<ul>
<li><a href="./" class="button" title="Go to the home page"</title>Home</a></li>
<li><a href="about.php" class="button">About</a></li>
<li><a href="contact.php" class="button">Contact</a></li>    
</ul></nav></div>

CSS

.button{ 
 color: rgb(0, 0, 0);
 font-size: 15px;
padding: 11px;
   text-shadow: 0px 2px 2px rgba(144,150,150,0.75);
  background: rgb(255, 255, 248);
  background: -moz-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: -o-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: -ms-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: linear-gradient(0deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.73);
 box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.73);
  }
 #nav li{
 display: block;
 float: left;
 }

 #nav ul{
 list-style-type:none;
 margin:0;
  }
 #nav ul li a{text-decoration:none;
font:Tahoma, Helvetica, Arial, sans-serif;
letter-spacing:0.1em;

 }