JSFiddle - React, Tailwind, and code Playground

by dine

HTML

<div class="container">
        <h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1>

        <div class="drop-shadow lifted">
            <p>Lifted corners</p>
        </div>
        
        <div class="drop-shadow curled">
            <p>Curled corners</p>
        </div>
        
        <div class="drop-shadow perspective">
            <p>Perspective</p>
        </div>
        
        <div class="drop-shadow raised">
            <p>Raised box</p>
        </div>

        <div class="drop-shadow curved curved-vt-1">
            <p>Single vertical curve</p>
        </div>

        <div class="drop-shadow curved curved-vt-2">
            <p>Vertical curves</p>
        </div>
        
        <div class="drop-shadow curved curved-hz-1">
            <p>Single horizontal curve</p>
        </div>
        
        <div class="drop-shadow curved curved-hz-2">
            <p>Horizontal curves</p>
        </div>


        <div class="drop-shadow lifted rotated">
            <p>Rotated box</p>
        </div>
    </div>

CSS

body {
            padding:20px 0 30px;
            font:14px/1.5 Arial, sans-serif;
            text-align:center;
            color:#333;
            background:#FAF0D9;
        }
        
        a {
            font-weight:bold;
            color:#346AA8;
        }
        
        a:hover,
        a:focus,
        a:active {
            text-decoration:none;
        }
        
        .container {
            position:relative;
            z-index:1;
            width:600px;
            padding:20px;
            margin:0 auto;
            background:#FAF0D9;
        }
        
        .container:after {
            content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
            font-size:0;
        }
        
        /* Shared styles */
        
        .drop-shadow {
            position:relative;
            float:left;
            width:40%;    
            padding:1em; 
            margin:2em 10px 4em; 
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute; 
            z-index:-2;
        }
        
        .drop-shadow p {
            font-size:16px;
            font-weight:bold;
        }
        
        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px; 
                 border-radius:4px;
        }
        
        .lifted:before,
        .lifted:after { 
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
               -moz-box-shadow:0 15px...