JSFiddle - React, Tailwind, and code Playground

by Tomalak

HTML

<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>
</ul>
<textarea name="show" id="show" cols="30" rows="10"></textarea>

CSS

#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);
}

JavaScript

$(".box ").click(function() {
    var id = $(this).parents().attr('id');
    var cssrules = document.styleSheets[0].rules["id"].style.cssText;
    $("#show ").html("cssrules");
});