JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="cards-preloader">
                <div class="cards-preloader__card cards-preloader__card--jack">
                    jack
                </div>
                <div class="cards-preloader__card cards-preloader__card--queen">
                    queen
                </div>
                <div class="cards-preloader__card cards-preloader__card--king">
                    king
                </div>
                <div class="cards-preloader__card cards-preloader__card--ace">
                    ace
                </div>
        </div>

CSS

.cards-preloader{position:absolute;top:50%;left:50%;margin-left:-35px;margin-top:-75px}.cards-preloader:after{content:'Загрузка...';position:fixed;top:50%;margin-top:-145px;font-size:24px;color:#fff;font-family:'Ubuntu', sans-serif;font-weight:300;left:0;right:0;text-align:center;opacity:.9}.cards-preloader:before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:#320a5a}.cards-preloader__card{font-size:0px;width:70px;height:100px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;position:absolute;-webkit-animation:rotate 3s infinite;-moz-animation:rotate 3s infinite;-o-animation:rotate 3s infinite;animation:rotate 3s...