JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <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 ="heartLeft"...

CSS

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

div {
 display: block;
}

#wrapper{
  width:1080px; 
  height:auto;
  margin: 0 auto;
  padding:30px 0;
  background-color:#ddd;

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

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

#wrapper .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;
  ...

JavaScript

for (var i=0; i<document.styleSheets.length; i++) {
    if (document.styleSheets[i].href === null)
        var sheet = document.styleSheets[i];
}

$(".box").click(function() { 
    var id = $(this).attr('id'); 
    var rules = sheet.cssRules || sheet.rules;
    for (var i=0; i<rules.length; i++) {
        if (rules[i].selectorText.indexOf("#"+id) == 0) {
           var rule = rules[i];
           break;
        }
    } 
    $("#show").val(rule.cssText);
});