JSFiddle - React, Tailwind, and code Playground

by memed

HTML

<div class="card_main">
            <div class="blue_layer">
                <div class="bl6"></div>
                <div class="bl2"></div>
                <div class="bl3"></div>
                <div class="bl1"></div>
                <div class="bl4"></div>
                <div class="bl5"></div>
            </div>
            <div class="red_layer">
                <div class="bl1"></div>
                <div class="bl2"></div>
            </div>
            <div class="green_layer">
                <div class="bl1"></div>
                <div class="bl2"></div>
            </div>
            <div class="yellow_layer">
                <div class="bl2"></div>
                <div class="bl3"></div>
                <div class="bl1"></div>
            </div>
            <div class="red_layer_2">
                <div class="bl2"></div>
                <div class="bl3"></div>
                <div class="bl1"></div>
            </div>
            <div class="green_layer_2">
                <div class="bl1"></div>
                <div class="bl2"></div>
                <div class="bl3"></div>
            </div>
            <div class="blue_layer_2">
                <div class="bl1"></div>
                <div class="bl2"></div>
            </div>
            <div class="white_layer">
                <div class="bl1"></div>
                <div class="bl4"></div>
                <div class="bl2"></div>
                <div class="bl3"></div>
                <div class="bl5"></div>
                <div class="bl6"></div>
                <div class="bl7"></div>
                <div class="bl8"></div>
                <div class="bl9"></div>
                <div class="bl10"></div>
                <div class="bl11"></div>
                <div class="bl12"></div>
                <div class="bl13"></div>
                <div class="bl14"></div>
                <div class="bl15"></div>
            </div>
            <div class="message">
                С Новым<br/>
       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Marck+Script&subset=cyrillic);

body {
    background: #fff;
    padding: 0;
    margin: 0;
}
.card_main {
    width: 500px;
    height: 590px;
    margin: 20px auto;
    border: 1px solid #ccc;
    position: relative;
    overflow: hidden;
    background: #57b7df;
    border: 10px dashed #5ED9FA;
    box-shadow: 6px -3px 25px #666;
}
.blue_layer div,
.blue_layer_2 div,
.green_layer div,
.green_layer_2 div,
.red_layer div,
.red_layer_2 div,
.yellow_layer div,
.white_layer {
    position: absolute;
}

.blue_layer div,
.blue_layer_2 div {
    background: #57b7df;
}
.blue_layer .bl6 {
    background: #fff;
    height: 525px;
    width: 210px;
    right: -10px;
    top: 68px;
}
.blue_layer .bl1 {
    width: 245px;
    height: 403px;
    border-radius: 0 163px 131px 0 / 0 254px 194px 0;
    bottom: -52px;
    left: 112px;
}
.blue_layer .bl2:after {
    content: '';
    position: absolute;
    top: -219px;
    left: -266px;
    width: 315px;
    height: 590px;
    background: #57b7df;
}
.blue_layer .bl2 {
    width: 60px;
    height: 100px;
    top: 219px;
    left: 272px;
}
.blue_layer .bl3 {
    width: 60px;
    height: 134px;
    top: 209px;
    left: 314px;
    background: #fff;
    border-radius: 25px 0 0 55px / 76px 0 0 50px;
}
.blue_layer .bl4 {
    width: 111px;
    height: 182px;
    left: 319px;
    top: 88px;
    border-radius: 100px 108px 0 126px/29px 163px 12px 98px;
}
.blue_layer .bl5 {
    width: 100px;
    height: 82px;
    top: 235px;
    left: 384px;
    transform: rotate(49deg);
    -webkit-transform: rotate(49deg);
    border-radius: 0 53px 44px 0/0 37px 30px 0;
}
.blue_layer .bl5:after {
    content:'';
    width: 110px;
    height: 19px;
    background: #57b7df;
    position: absolute;
    display: block;
    top: -13px;
    left: -50px;
    transform: rotate(22deg);
    -webkit-transform: rotate(22deg);
}
.blue_layer .bl5:before {
    content:'';
    width: 41px;
    height: 19px;
    background:...