JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <div class="box box1">
        .box1 {
            box-shadow: 0 0 10px #555;
        }
        </div>
        <div class="box box2">
            .box2 {
            box-shadow: 0 0 10px 10px #555;
        }
        </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: 0 0 10px #555;
        }
        
        .box2 {
            box-shadow: 0 0 10px 10px #555;
        }