JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<a class="circle" href="http://twitter.com/genelocklin"></a>

<p class="vadim">Originally By <a href="http://twitter.com/pepelsbey">Vadim</a></p>
<p class="gene">Forked by <a href="http://twitter.com/pepelsbey">GeneLocklin</a></p>

CSS

body {      
      margin:0;
      padding:75px;
      background:#555;
      color: #fff;
      font-family: sans-serif;
      }

p.vadim { position: absolute; top: 1em; left: 1em; }
p.vadim a, p.gene a { color: indianred; }

p.gene { position: absolute; top: 2.5em; left: 1em; }

a.circle { 
    text-align: center;  
    display: block; 
    position: relative;  
    width: 120px;
    height:120px;
    -webkit-border-radius:240px;
    -moz-border-radius:240px;
    -ms-border-radius:240px;
    -o-border-radius:240px;
    border-radius:240px;
    border: 30px solid #a8d7eb; 
    background: #81bc44;
    line-height: 120px; 
    padding: 75px;
    z-index:1;
    text-decoration: none; 
    color: black; 
    text-transform: uppercase;    
    }

a.circle::before { 
    content:"";    
    display:block;
    position:absolute; 
    z-index:-1;
    top:30px; 
    left:30px; 
    border:30px solid #f0ed7a; 
    background:#f47737;
    width: 150px;
    height: 150px;
    -webkit-border-radius:150px;
    -moz-border-radius:150px;
    -ms-border-radius:150px;
    -o-border-radius:150px;
    border-radius: 150px;
    }

a.circle::after { 
    content:"";    
    display:block;
    position:absolute; 
    z-index:-1;
    top:90px; 
    left:90px; 
    border:30px solid #ee4037; 
    background:#FFF;
    width: 30px;
    height:30px;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    -ms-border-radius:60px;
    -o-border-radius:60px;
    border-radius:60px;
   /* maybe these will work, someday */
    -webkit-transition: .12s  linear all;
    -moz-transition: .12s  linear all;
    -ms-transition: .12s  linear all;
    -o-transition: .12s  linear all;
    transition: .12s  linear all;
    }

a.circle:hover::after { 
    content:"hi";    
    line-height: 30px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.25);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.25);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.25);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,.25);
...

JavaScript

// original post came from http://daverupert.com/2011/06/two-tone-borders-with-css3/

// original fiddle: http://jsfiddle.net/nimbu/Z2EAe/