JSFiddle - React, Tailwind, and code Playground

by jack_pallot

CSS

@-webkit-keyframes flick {
    0% { opacity: 1; }
    49.99% { opacity: 1; }
    50% { opacity: 0; }
    99.99% { opacity: 0; }
}

@-moz-keyframes flick {
    0% { opacity: 1; }
    49.99% { opacity: 1; }
    50% { opacity: 0; }
    99.99% { opacity: 0; }
}

@-ms-keyframes flick {
    0% { opacity: 1; }
    49.99% { opacity: 1; }
    50% { opacity: 0; }
    99.99% { opacity: 0; }
}

@-o-keyframes flick {
    0% { opacity: 1; }
    49.99% { opacity: 1; }
    50% { opacity: 0; }
    99.99% { opacity: 0; }
}

@keyframes flick {
    0% { opacity: 1; }
    49.99% { opacity: 1; }
    50% { opacity: 0; }
    99.99% { opacity: 0; }
}

@-webkit-keyframes terminal {
    0% { width: 300px; }
    99.99% { width: 0px; }
}

@keyframes terminal {
    0% { width: 300px; }
    99.99% { width: 0px; }
}

.text {
    position: absolute;
    left: 0;
    z-index: 40;
    width: 300px;
    display: inline;
    color: red;
}

.caret:before {
    position: absloute;
    left: 0;
    z-index: 99;
    content: "";
    display: inline-block;
    background: red;
    width: 5px;
    height: 20px;
    -webkit-animation: flick 1s infinite;
}

.caret {
    position: absloute;
    left: 0;
    z-index: 99;
    display: inline-block;
    height: 20px;
    width: 300px;
    background: white;
     -webkit-animation: terminal 5s 1;
}
.container {
    display: block;
    border: 1px solid blue;
    height: 20px;
}