JSFiddle - React, Tailwind, and code Playground

by Bhesh Gurung

HTML

<ul class="tag-list">
    <li><a href="http://www.mixx.com/tags/crisis-assistance" rel="tag" title="crisis assistance">crisis assistance</a></li>
    <li><a href="http://www.mixx.com/tags/earthquake" rel="tag" title="earthquake">earthquake</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/world-vision" rel="tag" title="world vision">world vision</a></li>
</ul>

CSS

.post-tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}

a.post-tag:hover {
    background-color: #3E6D8E;
    color: #E0EAF1;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;
    text-decoration: none;
}