JSFiddle - React, Tailwind, and code Playground
by kentaromiura
HTML
<div id="main">
<div id="id1">
Raised:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id1b">
Raised:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id2">
Inset:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id2b">
Inset:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum...CSS
*
CSS FOR Kentaromiura Crazy Corner Version 0.2 (codename:Gatsu)
|-->from an idea of www.mswebpeople.com/krazy.html
|--------->from snazzy corner idea http://www.cssplay.co.uk/boxes/snazzy.html
|---------------->from nifty corner idea http://pro.html.it/articoli/id_598/idcat_31/pro.html
*/
/* Kenta */
.kenta {background: transparent; width:40%;}
.kenta h1, .raised p {margin:0 10px;}
.kenta h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.kenta p {padding-bottom:0.5em;}
.kenta .top, .kenta .bottom {display:block; background:transparent; font-size:1px;}
.kenta .b1, .kenta .b2, .kenta .b3, .kenta .b4, .kenta .b1b, .kenta .b2b, .kenta .b3b, .kenta .b4b {display:block; overflow:hidden;}
.kenta .b1, .kenta .b2, .kenta .b3, .kenta .b1b, .kenta .b2b, .kenta .b3b {height:1px;}
.kenta .b2,.kenta .b3 ,.kenta .b4, .kenta .b4b,.kenta .b3b,.kenta .b2b{border:0;background-color:#cccccc;}
.kenta .b1 {margin:0 1px; background:#ceceff;border-width:0 3px;}
.kenta .b2, .kenta .b2b {margin:1px 0; }
.kenta .b3, .kenta .b3b {margin:0 1px;}
.kenta .b4, .kenta .b4b {height:1px; margin:1px 0;}
.kenta .b1b {margin:0 1px; background:#ceceff;}
.kenta .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #999;}
/* Inset 3D Raised */
.raised {background: transparent; width:40%;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4...JavaScript
var namedColors = {
aliceblue: "#f0f8ff",
antiquewhite: "#faebd7",
aqua: "#00ffff",
aquamarine: "#7fffd4",
azure: "#f0ffff",
beige: "#f5f5dc",
bisque: "#ffe4c4",
black: "#000000",
blanchedalmond: "#ffebcd",
blue: "#0000ff",
blueviolet: "#8a2be2",
brown: "#a52a2a",
burlywood: "#deb887",
cadetblue: "#5f9ea0",
chartreuse: "#7fff00",
chocolate: "#d2691e",
coral: "#ff7f50",
cornflowerblue: "#6495ed",
cornsilk: "#fff8dc",
crimson: "#dc143c",
cyan: "#00ffff",
darkblue: "#00008b",
darkcyan: "#008b8b",
darkgoldenrod: "#b8860b",
darkgray: "#a9a9a9",
darkgreen: "#006400",
darkgrey: "#a9a9a9",
darkkhaki: "#bdb76b",
darkmagenta: "#8b008b",
darkolivegreen: "#556b2f",
darkorange: "#ff8c00",
darkorchid: "#9932cc",
darkred: "#8b0000",
darksalmon: "#e9967a",
darkseagreen: "#8fbc8f",
darkslateblue: "#483d8b",
darkslategray: "#2f4f4f",
darkslategrey: "#2f4f4f",
darkturquoise: "#00ced1",
darkviolet: "#9400d3",
deeppink: "#ff1493",
deepskyblue: "#00bfff",
dimgray: "#696969",
dimgrey: "#696969",
dodgerblue: "#1e90ff",
firebrick: "#b22222",
floralwhite: "#fffaf0",
forestgreen: "#228b22",
fuchsia: "#ff00ff",
gainsboro: "#dcdcdc",
ghostwhite: "#f8f8ff",
gold: "#ffd700",
goldenrod: "#daa520",
gray: "#808080",
green: "#008000",
greenyellow: "#adff2f",
grey: "#808080",
honeydew: "#f0fff0",
hotpink: "#ff69b4",
indianred: "#cd5c5c",
indigo: "#4b0082",
ivory: "#fffff0",
khaki: "#f0e68c",
lavender: "#e6e6fa",
lavenderblush: "#fff0f5",
lawngreen: "#7cfc00",
lemonchiffon: "#fffacd",
lightblue: "#add8e6",
lightcoral: "#f08080",
lightcyan: "#e0ffff",
lightgoldenrodyellow: "#fafad2",
lightgray: "#d3d3d3",
lightgreen: "#90ee90",
lightgrey: "#d3d3d3",
lightpink: "#ffb6c1",
lightsalmon: "#ffa07a",
lightseagreen: "#20b2aa",
lightskyblue: "#87cefa",
lightslategray: "#778899",
lightslategrey: "#778899",
lightsteelblue: "#b0c4de",
lightyellow: "#ffffe0",
lime: "#00ff00",
limegreen: "#32cd32",
linen: "#faf0e6",
magenta:...