JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<table class="table">       
    <tr width="25%" >
        <td width="25%" valign="top">
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button red" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button red" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button red" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a>           
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button red" href="#"onclick="Application"><span>Application</span></a>
            <a class="button blue" href="#"onclick="Application"><span>Application</span></a>
            <a...

CSS

.button {
    width:245px;
    height:25px;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);  
}
.blue {
    color:blue;
}
.red {
    color:red;
}

JavaScript

// Function to see if the browser can support a CSS attribute
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();

// Doesn't do anything if the browser supports transform
if (!supports('transform')) {
    // Gets all the buttons
    var buttons = document.getElementsByClassName('button');
    
    for(var i = 0, j = buttons.length; i < j; i++) {
        // "Scales" them when hovered
        buttons[i].onmouseover = function() {
            scale(this, 1.5);
        }        
    }
}

var clone;
function scale(obj, scaleFactor) {
    // Makes a copy of the object, positions it absolutely (to not affect
    // other elements), and scales it appropriately
    var clone = obj.cloneNode(true);
    clone.style.position = 'absolute';
    clone.style.top = obj.offsetTop + "px";
    clone.style.left = obj.offsetLeft + "px";
    clone.style.fontSize = parseInt(document.defaultView.getComputedStyle(obj, null).fontSize) * scaleFactor + "px";
    clone.style.width = obj.clientWidth * scaleFactor + "px";
    clone.style.height = obj.clientHeight * scaleFactor + "px";
    
    // Removes is when it stops being hovered
    clone.onmouseleave = function() {
        unscale(this);            
    }
    
    document.body.appendChild(clone);
}
function unscale(obj) {
    obj.parentNode.removeChild(obj);
}