JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div id="target">
    
</div>

CSS

#target {
    /*colors*/
    border-top-color:blue;
    border-right-color: red;
    border-bottom-color:black;
    border-left-color: green;
    /*styles*/
    border-top-style:solid;
    border-right-style:dashed;
    border-bottom-style:dotted;
    border-left-style:double;
    /*widths*/
    border-top-width:2px;
    border-right-width:4px;
    border-bottom-width:8px;
    border-left-width:16px;
    
    /*non-border UI styling*/
    background:#e5e5e5;
    min-width:300px;
    min-height:300px;
    margin:20px;    
}

JavaScript

var properties = [
    'border',
    'border-color',
    'border-style',
    'border-width',
    'border-top',
    'border-top-color',
    'border-top-style',
    'border-top-width',
    'border-left',
    'border-left-color',
    'border-left-style',
    'border-left-width',
    'border-right',
    'border-right-color',
    'border-right-style',
    'border-right-width',
    'border-bottom',
    'border-bottom-color',
    'border-bottom-style',
    'border-bottom-width', 
];
var $ul = $("<ul></ul>");
    var target = $('#target');
    for(var i = 0; i < properties.length; i++){
var property = properties[i];
var value = target.css(property);
$ul.append('<li>' + property + ' : ' + value + '</li>');
    }
    target.html($ul);