JSFiddle - React, Tailwind, and code Playground

Basic Ready-to-Use CSS Styles

by Jennifer Perrin

HTML

<section class="main">
    <div class="example-wrapper clearfix">
        <h3>Directional Box Shadows</h3>
        <div class="demo-wrapper">
            <div class="block-level drop-shadow top">Top</div>
            <div class="block-level drop-shadow right">Right</div>
            <div class="block-level drop-shadow bottom">Bottom</div>
            <div class="block-level drop-shadow left">Left</div>
        </div>
    </div>

    <div class="example-wrapper clearfix">
        <h3>Emphesized Box Shadows</h3>
        <div class="demo-wrapper">
            <div class="block-level emphasize-dark">Dark</div>
            <div class="block-level emphasize-light">Light</div>
            <div class="block-level emphasize-inset">Inset</div>
            <div class="block-level emphasize-border">Border</div>
        </div>
    </div>

    <div class="example-wrapper clearfix">
        <h3>Embossed Box Shadows</h3>
        <div class="demo-wrapper">
            <div class="block-level embossed-light">Light</div>
            <div class="block-level embossed-heavy">Heavy</div>
        </div>
    </div>

    <div class="example-wrapper clearfix">
        <h3>Gradients</h3>
        <div class="demo-wrapper">
            <div class="block-level gradient-light-linear">Light Linear</div>
            <div class="block-level gradient-dark-linear">Dark Linear</div>
            <div class="block-level gradient-light-radial">Light Radial</div>
            <div class="block-level gradient-dark-radial">Dark Radial</div>
        </div>
    </div>

    <div class="example-wrapper clearfix">
        <h3>Rounded Borders</h3>
        <div class="demo-wrapper">
            <div class="block-level light-rounded">Light</div>
            <div class="block-level heavy-rounded">Heavy</div>
            <div class="block-level full-rounded">Full</div>
            <div class="block-level barrel-rounded">Barrel</div>
        </div>
    </div>

    <div class="example-wrapper clearfix">
       ...

CSS

.example-wrapper {
    width: 600px;
    padding: 0 30px 40px 30px;
    margin: 20px auto;
}

.example-wrapper h3 {
    background: #555;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
    border-radius: 20px 20px 0 0;
    padding: 13px 20px;
    font-size: 22px;
}

.demo-wrapper {
    padding: 35px 20px;
    background: #f8f8f8;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(0,0,0,0.1);
    border-top-color: rgba(255,255,255,0.4);
    border-bottom-color: rgba(255,255,255,0.4);
}

.demo-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

.code-wrapper {
    padding: 30px 40px 10px;
    display: block;
    background: #f0f0f0;
    background: rgba(0,0,0,0.06);
    border-radius: 0 0 20px 20px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}

.code-wrapper code {
    white-space: pre-wrap;
    font-family: Monaco, Consolas, "Lucida Console", monospace;
    color: #444;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 22px;
}

.block-level {
    width: 120px;
    height: 120px;
    margin: 20px;
    position: relative;
    float: left;
    color: #fff;
    padding: 20px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}

/* -- Basic Ready-to-Use CSS Styles -- */

/* Directional Box Shadows */
.drop-shadow {
    background: #9479fa;
}

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4)
}

/* Emphesized Box Shadows */
div[class*="emphasize-"] {
    background: #69D2E7;
}

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
}

.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25)
}

.emphasize-inset {
    box-shadow: inset 0 0 7px 4px...