JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <div class="box box1">Box1</div>
        <div class="box box2">Box2</div>
    </div>

CSS

body {
            padding: 20px;
        }
        
        .demo {
            width: 300px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 20px;
            background: #ccc;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
 .box1 {
            box-shadow: -5px 0 5px green, /*左边阴影*/
            0 -5px 5px blue, /*顶部阴影*/
            0 5px 5px red, /*底部阴影*/
            5px 0 5px yellow; /*右边阴影*/

        }
        
        .box2 {
            box-shadow: -5px 0 5px -5px green, /*左边阴影*/
            0 -5px 5px -5px blue, /*顶部阴影*/
            0 5px 5px -5px red, /*底部阴影*/
            5px 0 5px -5px yellow; /*右边阴影*/
        }