JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div><span class="fancy">I'm fancy! Click to find out my styles ;P</span>
<p class="result"></p>
</div>

CSS

html {
    background: #5b5b5b;
}

.fancy {
    background: mediumSeaGreen;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    display: block;
}

p {
    color: #fff;
}

JavaScript

$('span').on('click', function() {
    var styles = $('.fancy').css('background', 'padding', 'border-radius', 'box-shadow', 'display');
    $.each( styles, function( prop, value ) {
    html.push( prop + ": " + value );
  });
    $('p').text(styles);
});