JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<div>
   <input placeholder="this is dog" type="text" />
</div>

CSS

div {
    position: relative;
}
input {
    width: 400px;
    background: transparent;
    position: absolute;
}

span:before {
    color: red;
    content: attr(placeholder);
    display: inline-block;
    height: 10px;
    position: absolute;
}

JavaScript

var elm = $('<span />');
$('input').after(elm);
elm.text(elm.prev('input').attr('placeholder') );
$('input').removeAttr('placeholder');