JSFiddle - React, Tailwind, and code Playground

by robertolux

HTML

<a class="tint1" href="www.google.com"><img title= "Name Here" src="https://lh5.googleusercontent.com/-e6-IHd-dFwU/T_b8n7kPwOI/AAAAAAAAF5I/lAfDCwKbtNI/s113/callme.png" border="0" /><a class="tint2" href="www.google.com"><img title= "Name Here" src="https://lh5.googleusercontent.com/-e6-IHd-dFwU/T_b8n7kPwOI/AAAAAAAAF5I/lAfDCwKbtNI/s113/callme.png" border="0" /><a class="tint3" href="www.google.com"><img title= "Name Here" src="https://lh5.googleusercontent.com/-e6-IHd-dFwU/T_b8n7kPwOI/AAAAAAAAF5I/lAfDCwKbtNI/s113/callme.png" border="0" /><a class="tint4" href="www.google.com"><img title= "Name Here" src="https://lh5.googleusercontent.com/-e6-IHd-dFwU/T_b8n7kPwOI/AAAAAAAAF5I/lAfDCwKbtNI/s113/callme.png" border="0" />

CSS

.tint {  
        position: relative;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    }  
      
    .tint:after {  
        content: "";  
        display: block;  
        position: absolute;  
        top: 0;  
        bottom: 4px;  
        left: 0;  
        right: 0;  
        background: rgba(0,255,255, 0.5);  
        -moz-transition: background .3s linear;  
        -webkit-transition: background .3s linear;  
        -ms-transition: background .3s linear;  
        -o-transition: background .3s linear;  
        transition: background .3s linear;  
    }  
      
    .tint:hover:after {  
        background: none;  
    }  

 .tint1 {  
        position: relative;
    float: left;
    margin-left: 5px;
    margin-bottom: 0px;
    cursor: pointer;
    }  
      
    .tint1:after {  
        content: "";  
        display: block;  
        position: absolute;  
        top: 0;  
        bottom: 4px;  
        left: 0;  
        right: 0;  
        background: rgba(255,0,102, 0.5);  
        -moz-transition: background .3s linear;  
        -webkit-transition: background .3s linear;  
        -ms-transition: background .3s linear;  
        -o-transition: background .3s linear;  
        transition: background .3s linear;  
    }  
      
    .tint1:hover:after {  
        background: none;  
    }  

.tint2 {  
        position: relative;
    float: left;
    margin-left: 5px;
    margin-bottom: 0px;
    cursor: pointer;
  }
      
    .tint2:after {  
        content: "";  
        display: block;  
        position: absolute;  
        top: 0;  
        bottom: 4px;  
        left: 0;  
        right: 0;  
        background: rgba(255,157,0, 0.5);  
        -moz-transition: background .3s linear;  
        -webkit-transition: background .3s linear;  
        -ms-transition: background .3s linear;  
        -o-transition: background .3s linear;  
        transition: background .3s linear;  
    }  
      
   ...