JSFiddle - React, Tailwind, and code Playground

by nekosmash

HTML

<div class="circle">
    <a href="http://google.com">1</a>
</div>

CSS

.circle{
    border-radius:15px;
    height:30px;
    width:30px;
    background:#555;
    background-image: -webkit-gradient(radial, center top, 0, center bottom, 100, from(#aaa), to(#333));
    background-image: -webkit-radial-gradient(center top, circle closest-corner, #aaa 0%, #333 100%);
    background-image: -moz-radial-gradient(center top, circle closest-corner, #aaa 0%, #333 100%);
    background-image: -ms-radial-gradient(center top, circle closest-corner, #aaa 0%, #333 100%);
    background-image: radial-gradient(center top, circle closest-corner, #aaa 0%, #333 100%);
    text-align:center;
    vertical-align:middle;
    -webkit-box-shadow: rgba(0,0,0,.5) 0px 3px 5px 0px  inset;
    -moz-box-shadow: rgba(0,0,0,.5) 0px 3px 5px 0px  inset;
    box-shadow: rgba(0,0,0,.5) 0px 3px 5px 0px inset;
}

.circle a{
    line-height:30px;
}