JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="ufo">
  <div class="ufo_c"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30410-200.png" alt="#">
    <div class="ufo_c_b">
        <div class="ufo_slide ufo_sl_one active">
          <h4>Привет!</h4>
          <span>Позволь в кратце о шаблоне рассказать?</span>
          <input class="ufo_but_go" type="button" value="Рассказывай" />
        </div>
        <div class="ufo_slide ufo_sl_two">
          <h4>Адаптивность</h4>
          <span>Согласно тестам, около 15% пользователей посещают подобные сайты с карманных устройств, поэтому сайт подготовлен для удобной работы на любом типе устройства и любом размере экрана, убедитесь сами!</span>
          <div class="ufo_b_n_p">
            <span><вернутся</span>
            <span>далее></span>
          </div>
        </div>
        <div class="ufo_slide ufo_sl_thr">
          <h4>Шаблонизатор</h4>
          <span>Встроенный шаблонизатор позволит настроить сайт так как вы захотите, настройки цветовой гаммы сайта а также многих активных элементов сайта, это ждет вас при использовании данного шаблона.</span>
          <div class="ufo_b_n_p">
            <span><назад</span>
            <span>далее></span>
          </div>
        </div>
      <input class="ufo_but_exit" type="button" value="Попросить нло больше не прилетать">
    </div>
  
  </div>
</div>

CSS

*{margin:0;padding:0;}
.ufo{position:fixed;left:0;top:40px;}
.ufo img{width:50px;margin-left:20px;display:none;opacity:0;transform:translate(-100px, 0px);animation:go-ufo-img 1s infinite alternate;-webkit-animation:go-ufo-img 1s infinite alternate;}
.ufo_c{position:relative;}
.ufo_c_b{display:none;opacity:0;cursor:default;position:absolute;top:0;left:100%;margin-left:20px;background:#FFF;padding:10px 20px;*width:160px;transform:rotate(30deg) translate(100px, 30px);}
.ufo_slide{display:none;}
.ufo_slide.active{display:block;}
.ufo_slide > h4{color:#696969;}
.ufo_slide > span{margin:10px 0;display:block;color:#696969;}
.ufo_b_n_p{color:#272727;display:flex;justify-content:space-between;}
.ufo_b_n_p span{}
.ufo_c_b input{outline:none;border:none;width:100%;}
.ufo_c_b .ufo_but_go{background:#7ABFDA;padding:4px 0;color:#fff;}
.ufo_c_b .ufo_but_exit{font-size:.8em;margin-top:10px;background:transparent;padding:5px;color:#BDBDBD;}



@keyframes go-ufo-img{
    from{margin-top:0px;}
    to{margin-top:5px;}
  }
  @-webkit-keyframes go-ufo-img{
    from{margin-top:0px;}
    to{margin-top:5px;}
  }

JavaScript

(function(t,e){if(typeof define==="function"&&define.amd){define(["jquery"],e)}else if(typeof exports==="object"){module.exports=e(require("jquery"))}else{e(t.jQuery)}})(this,function(t){t.transit={version:"0.9.12",propertyMap:{marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"},enabled:true,useTransitionEnd:false};var e=document.createElement("div");var n={};function i(t){if(t in e.style)return t;var n=["Moz","Webkit","O","ms"];var i=t.charAt(0).toUpperCase()+t.substr(1);for(var r=0;r<n.length;++r){var s=n[r]+i;if(s in e.style){return s}}}function r(){e.style[n.transform]="";e.style[n.transform]="rotateY(90deg)";return e.style[n.transform]!==""}var s=navigator.userAgent.toLowerCase().indexOf("chrome")>-1;n.transition=i("transition");n.transitionDelay=i("transitionDelay");n.transform=i("transform");n.transformOrigin=i("transformOrigin");n.filter=i("Filter");n.transform3d=r();var a={transition:"transitionend",MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"};var o=n.transitionEnd=a[n.transition]||null;for(var u in n){if(n.hasOwnProperty(u)&&typeof...