JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div class="box">
<a href="http://acme-world.com/contacts/?industry=retail-trading" class="link link--small link--bmarged bold color--dark s--fade s--fade-up js-scroll-anim e--fade-up" data-anim="e--fade-up" data-time="670" data-delay="180" title="Contact us for more informations" style="transition-delay: 0.18s; transition-duration: 0.67s;">
              <div class="link__ico link__ico--arrow wrapper--o">
                  <svg version="1.1" class="box--a box--tl w100 link__overlay-right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20.2 4.7" enable-background="new 0 0 20.2 4.7" xml:space="preserve">
                      <path fill="#ffc815" d="M0,2.6h16v-1H0V2.6z M16.2,0v4.7l4.1-2.4L16.2,0z"></path>
                  </svg>  
                  <div class="wrapper wrapper--panel link__overlay-left">
                      <svg version="1.1" class="w100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20.2 4.7" enable-background="new 0 0 20.2 4.7" xml:space="preserve">
                          <path fill="#ffc815" d="M0,2.6h16v-1H0V2.6z M16.2,0v4.7l4.1-2.4L16.2,0z"></path>
                      </svg>  
                  </div>
              </div>
              
              <span class="link">

                  <span class="color--transparent">Contact us for more information</span>

                  <div class="wrapper wrapper--panel wrapper--o link__panel--right">
                      <div class="wrapper wrapper--panel wrapper--o link__panel--left">
                          <span class="link color--dark">Contact us for more information</span>
                      </div>
                  </div>
                  
                  <div class="wrapper wrapper--panel wrapper--o link__mask--left">
                      <div class="wrapper wrapper--panel wrapper--o link__mask--right">
                          <span class="link...

CSS

.e--fade-up {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    -ms-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
}
.s--fade-up {
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translateY(150px) translateZ(0);
    -ms-transform: translateY(150px) translateZ(0);
    transform: translateY(150px) translateZ(0);
}
.s--fade {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.link__ico--arrow {
    width: 22px;
    height: 5px;
    margin-right: 17px;
    margin-bottom: 1px;
}
.link__ico {
    position: relative;
    display: inline-block;
}
.wrapper--o {
    overflow: hidden;
}
.link {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform: uppercase;
}
.color--transparent {
    color: transparent;
}
.link__panel--right {
    -webkit-transform: translateX(0) translateZ(0);
    -ms-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
    -webkit-transition: 0.4s cubic-bezier(0.125, 0.75, 0.415, 1);
    transition: 0.4s cubic-bezier(0.125, 0.75, 0.415, 1);
}

.wrapper--o {
    overflow: hidden;
}
.wrapper--abs, .wrapper--panel {
    position: absolute;
    top: 0;
    left: 0;
}
.box {
  position: relative;
}
.wrapper--full, .wrapper--panel {
    height: 100%;
    width: 100%;
}
.color--yellow {
    color:...