JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wraper">
    <div class="main">
        <ul>
            <li><div id ="square"class ="box">parallelogram</div></li>
            <li><div id ="parallelogram"class ="box">parallelogram</div></li>
            <li><div id ="parallelogram2"class ="box">parallelogram2</div></li>
            <li><div id ="diamond"class ="box">diamond</div></li>
            <li><div id="trapez" class="box">trapez</div></li>
            <li><div id="trapez2" class="box">trapez2</div></li>
            <li><div id="trapez3" class="box">trapez3</div></li>
            <li><div id="trapez4" class="box">trapez4</div> </li>
            <li><div id ="triangleUp"class ="box">triangleUp</div></li>
            <li><div id ="triangleRight"class ="box">triangleRight</div></li>
            <li><div id ="triangleDown"class ="box">triangleDown</div></li>
            <li><div id ="triangleLeft"class ="box">triangleLeft</div></li>
            <li><div id ="half-circleTop"class ="box">half-circleTop</div></li>
            <li><div id ="half-circleRight"class ="box"></div></li>
            <li><div id ="half-circleBottom"class ="box"></div></li>
            <li><div id ="half-circleLeft"class ="box"></div></li>
            <li><div id ="circle"class ="box"></div></li>
            <li><div id ="ovalHor"class ="box"></div></li>
            <li><div id ="ovalVert" class ="box"></div></li>
            <li><div id ="chartColorful" class ="box"></div></li>
            <li><div id ="quartercircleTop" class ="box"></div></li>
            <li><div id ="quartercircleRight" class ="box"></div></li>
            <li><div id ="quartercircleBottom" class ="box"></div></li>
            <li><div id ="quartercircleLeft" class ="box"></div></li>
            <li><div id ="chartTop" class ="box"></div></li>
            <li><div id ="chartRight" class ="box"></div></li>
            <li><div id ="chartBottom"class ="box"></div></li>
            <li><div id ="chartLeft"class ="box"></div></li>
            <li><div id...

CSS

html, body, div, {
margin: 0;
padding: 0;
}

div {
 display: block;
}
#wraper{
  width:1080px; 
  height:auto;
  margin: 0 auto;
  padding:30px 0;
  background-color:#ddd;

 
}
.main{
  margin:0 auto;
  position:relative;
  
}

#wraper .main ul li {
  width:250px;
  height:250px;
  float:left;
  text-decoration:none;
  list-style:none;
  background-color:#EFF4FA;
}
#wraper .main ul li:hover{
  background-color:#808080;
  
  }

#wraper .main .box {
  float:left;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position:relative;
}

.clear{
  clear:both;
}

#show{
  bottom:20px;
  right:10px;
  position:fixed;
}


#square {  
 width: 100px;                        
 height: 100px;                       
 background: blue;                    
} 

#parallelogram{
   width:100px;
   height:70px;
   background:blue;
   -webkit-transform:skew(20deg);
   -moz-transform:skew(20deg);
   -o-transform:skew(20deg);
   transform:skew(20deg);
}

#parallelogram2{
   width:100px;
   height:70px;
   background:blue;
   -webkit-transform:skew(-20deg);
   -moz-transform:skew(-20deg);
   -o-transform:skew(-20deg);
   transform:skew(-20deg);
}

#diamond {
    width: 80px;
    height: 80px;
    background: blue;
    margin: 3px 0 0 30px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }


#trapez {
  height: 0px;
  width: 50px;
  border-bottom: 50px solid green;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  -ms-border-radius: 20px 20px 0 0;
  border-radius:20px 20px 0 0;
}


#trapez2{
   height: 0;
   width: 30px;
   border-top: 50px solid green;
   border-left:...

JavaScript

$(".box").click(function(){
     
      var style = $.param(css($(this))).replace(/&/g,';\n');
      $("#show").val(style); 

  });

function css(a){
    var sheets = document.styleSheets, o = {};
    for(var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for(var r in rules) {
            if(a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css){
        var s = {};
        if(!css) return s;
        if(css instanceof CSSStyleDeclaration) {
            for(var i in css) {
                if((css[i]).toLowerCase) {
                    s[(css[i]).toLowerCase()] = (css[css[i]]);
                }
            }
        } else if(typeof css == "string") {
            css = css.split("; ");          
            for (var i in css) {
                var l = css[i].split(": ");
                s[l[0].toLowerCase()] = (l[1]);
            };
        }
        return s;
    }