JSFiddle - React, Tailwind, and code Playground

voting buttons

by Jennifer Perrin

HTML

<div class="votes">
    <a href="#"></a>
    <p style="color:#468847">100</p>
    <a href="#"></a>
</div>

<br /><br /><br />

<div class="votes">
    <a href="#"></a>
    <p style="color:#b94a48">-28</p>
    <a href="#"></a>
</div>

<br /><br /><br />

<div class="votes">
    <a href="#"></a>
    <p>16</p>
    <a href="#"></a>
</div>
<div class="voteNums">Votes: 18</div>

<br /><br /><br /><br />

<p>This is a nice block of text or could be an article just waiting for someone to come and vote on it! Wow! Look! A Voting system. Let's click on one!</p>
<div class="votes">
    <a href="#"></a>
    <p>18</p>
    <a href="#"></a>
</div>
<div class="voteNums">
    <span>16</span>
    <span>2</span>
</div>

CSS

body {
    background: #444 url(http://jenniferperrin.com/image/background.gif) 0 0 repeat;
    padding: 50px;
    color: #f8f8f8;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.6);
    -webkit-font-smoothing: antialiased;
}
p { margin: 6px 0; }

.votes a {
    box-shadow: 0 1px 1px hsla(0,0%,100%,.1),
                inset 0 1px 0px hsla(0,0%,100%,.3),
                inset 0 -15px 20px hsla(0,0%,0%,.15);
    color: #f6f6f6;
    float: left;
    letter-spacing: 1px;
    height: 36px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 45px;
}
.votes a:first-child {
    background: #dff0d8  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAAGXcA1uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAk9JREFUeNpiYAAClw53BRDNxAAB9xmgovP/QwFAADFgAJgoI7I0QABhyMIAE9AwB5ggiC5eVvofZovAfywAIIBgkvvRjQY7Ul9OzwEo+Z4BGwBpB0r+RxFABjD/Ync7yI6YGfFYjQYIIBS06MhiVHsIAaDi/jsv7/7//OMLTo2MoAAB0u+BXgQLKIspM2Q6p8MVuHZ6HNhTsdMR2dT9/wmACw8vwjELMU6F2Q52EtSWhp7IrnqYxJefXxmO3TrG0L2tF8Q9gKwZIIDQPf2elBC6v/b0elDoJOBTx4TEvhBkEgAKpflATQbE2gIOlbq1jThtYkbmKLmoHLRWs0oA2fTy08uA/3qMD+/tuXsBWQ0LKB542HkclMWVoBEHoUu9ihnuvrw3fw8DwwKszsAFgPLnMRIcsTGdPi/rP9PFR5eIimkQ5uHgZmACJTZSANO6M+svkKIBnJYC+oP/ry9YAxcEOXPdmQ0Mx24fewDkPkDWABBgjDgisAEY1PWQhPilEZgfGhioCWDpEASg2fw90cmLSAtABdj/nZd2gS0BFQmgKINa5EBNi86DCltkMG3PDHD5QyiXYcQB1GUKUAwD/EBcMCNxGjzJwwCocNh1efcHINMRGEcXCAYHqHQkFYBSO9Q3OIMNVOY5AFMMhguJLQvXF6xlKFlWtp+hwx2nD/YTkz/JAaD4A5V4F4jJz+QCcJH64uNLhruv7tHEAkakpsb5OJsYgVjrGKI0vgQ66ujt4wxff37BqWbn5d0MjOjpHkgRyrEfoHXXQmDy3EDIIQA9xED+QFm2yQAAAABJRU5ErkJggg==) 10px 5px no-repeat;
    border: 1px #468847 solid;
    border-radius: 5px 0 0 5px;
}
.votes a:last-child {
    background: #f2dede ...