JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Nice Box</title>
    <style type="text/css">
        body {
            background: #e3e3e3;
            color: #4b4b4b;
            font-size: 12px;
            font-family: Helvetica, Arial, sans-serif;
        }
        h1 { 
            margin: 0 0 15px 0; 
            padding: 0;
            text-shadow: 1px 1px white;
        }
        .site-wrapper {
            margin: 0 auto;
            width: 960px;
        }
        .layout {
            background: #f2f2f2;
            /*box-shadow: 0 0 5px #aeaeae;*/
            padding: 15px;
            position: relative;
        }
        .box {
            position: relative;
        z-index: 10;
        }
        .pseudo-box{
            background: #cbcbcb; /* Old browsers */
            background: -moz-linear-gradient(top,  #cbcbcb 0%, #bfbfbf 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#bfbfbf)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #cbcbcb 0%,#bfbfbf 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #cbcbcb 0%,#bfbfbf 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #cbcbcb 0%,#bfbfbf 100%); /* IE10+ */
            background: linear-gradient(top,  #cbcbcb 0%,#bfbfbf 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
            
            border: 1px solid #888888;
            border-radius: 6px;
            /* box-shadow: 0 0 5px #cbcbcb, inset 0px 0px 1px #dedede; */
            padding: 10px;    
            position: relative;
        }
        .pseudo-box:before,
        .pseudo-box:after {
           content:"";
           position:absolute;
        z-index: -1;
           bottom: 10px;
           left:10px;
           width:50%;
           height:50%;
          ...