JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <div class="box box1"><p>Box1</p></div>
        <div class="box box2"><p>Box2</p></div>
        <div class="box box3"><p>Box3</p></div>
        <div class="box box4"><p>Box4</p><div class="shBl"></div><div class="shBr"></div></div>
        <div class="box box5"><p>Box5</p><div class="shBl"></div><div class="shBlFlod"></div></div>
        <div class="box box6"><p>Box6</p><div class="cornerLf"></div><div class="cornerRt"></div></div>
        <div class="box box7"><p>Box7</p></div>
        <div class="box box8"><p>Box8</p></div>
        <div class="box box9"><p>Box9</p></div>
        <div class="box box10"><p>Box10</p></div>
        <div class="box box11"><p>Box11</p><div class="ribbon"></div></div>
        <div class="box box12"><p>Box12</p><div class="shBl"></div><div class="shBlFlod"></div><div class="ribbon"></div></div>
        <div class="box box13"><p>Box13</p><div class="cornerLf"></div><div class="cornerRt"></div><div class="ribbon"></div></div>
        <div class="box box14"><p>Box14</p><div class="ribbon"></div></div>
        <div class="box box15"><p>Box15</p><div class="ribbon"></div></div>
    </div>

CSS

*{margin: 0;padding:0;}
        body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;}
        pre{max-height:200px;overflow:auto;}
        div.demo {overflow:auto;}
        .box {
            width: 300px;
            min-height: 300px;
            margin: 30px;
            display: inline-block;
            background: #fff;
            border: 1px solid #ccc;
            position:relative;
        }
        .box p {
            margin: 30px;
            color: #aaa;
            outline: none;
        }
        /*=========Box1===========*/
        .box1{            
            background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            /*设置Box的阴影效果*/
            -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            /*制作右下脚折边效果*/
            -moz-border-radius: 0 0 6px 0 / 0 0 50px 0;
            -webkit-border-radius: 0 0 6px 0 / 0 0 50px 0;
            border-radius: 0 0 6px 0 / 0 0 50px 0;
        }
        /*使用:before来制作底部阴影，并对阴影进行旋转的扭曲和位移设置*/
        .box1:before{
            content: '';
            width: 50px;
            height: 100px;
            position:absolute;
            bottom:0; right:0;
            -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
            box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
            z-index:-1;
            -webkit-transform: translate(-35px,-40px)    skew(0deg,30deg) rotate(-25deg);
            -moz-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);
            -o-transform:...