JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<input id="live-type" type="text" value="text">
<br><br>
<div id="box"></div>

CSS

body {
    background: #ccc;
    font-size: 24px;
    font-family: sans-serif;
}

#box {
    height: 100px;
    padding: 20px;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    color: #444;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

@-webkit-keyframes pulse {
    0% {
        opacity: 1;
    } 50% {
        opacity: 0;
    } 100% {
        opacity: 1;
    }
}

#box:after {
    content: "\00A0\00A0";
    background-color: #ccc;
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

JavaScript

// live text input

var $box = $('#box'),
    $liveType = $('#live-type');

$box.html($liveType.val());

$liveType.keyup(function() {
    $box.html($(this).val());
});

// css animations not working on a pseudo :after element