JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<div contenteditable="true" placeholder="Name"></div>
<div contenteditable="true" placeholder="Email"></div>
<div contenteditable="true" placeholder="Message"></div>

CSS

div[contenteditable]{
    display:block;
    padding:10px;
    margin-bottom:10px;
    border:1px solid #ccc;
    position:relative;
}
div[contenteditable]:focus,
div[contenteditable]:active {
    border:1px solid #ccccaa;
}
div[contenteditable][placeholder]:empty::before{
    content: attr(placeholder);
    display:block;
    color:#ccc;
    position:absolute;
    top:10px;
    left:10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
div[contenteditable][placeholder]:not(:empty)::before{
    content: attr(placeholder);
    display:block;
    color:#ccc;
    font-size:8px;
    position:absolute;
    top:2px;
    left:10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

JavaScript

// Mimic-ing placeholders in contenteditable...
// @i_am_brennan