JSFiddle - React, Tailwind, and code Playground

by stedman

HTML

<a href="/feedback" class=feedback><span class=symbol><b>[+]</b></span> <span class=text>Site Feedback</span></a>

CSS

@-webkit-keyframes pivot {
  0%   { -webkit-transform: scaleX(1); }
  50% { -webkit-transform: scaleX(0); }
}
@-keyframes pivot {
  0%   { transform: scaleX(1); }
  50% { transform: scaleX(0); }
}

.feedback {
    background-color: #fcfcfc;
    border: solid #ccc;
    border-width: 1px 0 0 1px;
    bottom: 0;
    font: 400 100% Arial;
    padding: .25em .5em;
    position: absolute;
    right: 0;
    text-align: right;
    text-decoration: none;
    white-space: nowrap;
}
.feedback span {
    display: inline-block;
    text-align: left;
    vertical-align: bottom;
}
.feedback:hover .text {
    width: 100%;
}
.symbol {
    -webkit-animation: pivot 2s infinite;
    animation: pivot 2s infinite;
}
.symbol b {
    font-weight: 400;
}
.text {
    overflow: hidden;
    width: 0;
}
.feedback,
.text {
    -webkit-transition: 0.5s ease;
}