JSFiddle - React, Tailwind, and code Playground
by LuckyCat
CSS
*{margin:0;padding:0;box-sizing:border-box}:focus{outline:0}img{border:none;display:block}ol,ul{list-style:none}iframe{border:none !important;width:0 !important;height:0 !important}a{text-decoration:none;cursor:pointer !important}html{font-size:62.5%;-webkit-text-size-adjust:100%;position:relative}body{font-family:Arial, sans-serif;color:#454a50;line-height:1.3;font-size:1.8rem;background:#fff url(bg2.jpg) no-repeat center 0;background-size:cover}.wrap{position:relative;height:100vh;min-height:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.step-block{display:none;max-width:600px;width:96%;background-color:#fff}.step-item{display:none}.step-item.visible{display:block}.highlight{color:red}.popup-wrapper{background:url(girl_2.gif) no-repeat center top;background-size:cover;padding:35% 5% 5%;box-shadow:0 0 18px rgba(0, 0, 0, 0.4);max-width:600px;width:96%;border-radius:5px}.popup-block{background:#fff;overflow:hidden;border:1px solid #949494;border-radius:5px;box-shadow:0 0 18px rgba(0, 0, 0, 0.4);text-align:center;padding:0 3rem}.popup-header{padding:2rem 0.5rem;font-weight:bold;line-height:1}.popup-title{margin-bottom:1rem;font-size:16px}.popup-buttons-block{margin:2rem auto}.popup-btn{background:#3cc566;border:2px solid #3cc566;display:inline-block;min-width:120px;width:45%;margin:1rem 0;padding:1rem 1rem;cursor:pointer;transition:all 0.3s linear;font-weight:bold;border-radius:4px;font-size:2rem;color:#fff;box-shadow:0px 5px 10px #b8b8b8;margin:1rem auto}.popup-btn:hover{background:#31bc5b}.loader-overlay{display:none;position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0,...