JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<br>
<table id="maintab" border="0" style="width:99%;text-align:center;" align="center">
    <tr>
        <td width="33%">
<a class="button_example" href="#">HOME</a>

        </td>
        <td width="34%">
<a class="button_example" href="#">GUIDE</a>

        </td>
        <td width="33%">
<a class="button_example" href="#">CHARACTERS</a>

        </td>
    </tr>
</table>
<br>
<div id="walkthrough" style="display:block;">example</div>

CSS

.button_example {
    border:1px solid #25729a;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size:12px;
    font-family:arial, helvetica, sans-serif;
    padding: 10px 10px 10px 10px;
    text-decoration:none;
    display:inline-block;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight:bold;
    color: #FFFFFF;
    background-color: #3093c7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
    background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
    background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#3093c7, endColorstr=#1c5a85);
    width:90px;
}
.button_example:hover {
    border:1px solid #1c5675;
    background-color: #26759e;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
    background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
    background-image: -moz-linear-gradient(top, #26759e, #133d5b);
    background-image: -ms-linear-gradient(top, #26759e, #133d5b);
    background-image: -o-linear-gradient(top, #26759e, #133d5b);
    background-image: linear-gradient(to bottom, #26759e, #133d5b);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#26759e, endColorstr=#133d5b);
}
#walkthrough {
    
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 85%;
    height: 2000px;
    border: 1px solid #000000;
    
    border-radius: 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}