JSFiddle - React, Tailwind, and code Playground

by Ralph Echter

HTML

<input placeholder="Enter a tag..." />

CSS

input {
    display: block;
    padding: 2%;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid #888;
    color: red;
    outline: none;
}

input:focus { border-color: red }

input::-webkit-input-placeholder {
  color: red;
	transition: .3s;
}

input::-moz-placeholder {
  color: red;
	transition: .3s;
}

input::-ms-input-placeholder {
  color: red;
	transition: .3s;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus::-ms-input-placeholder {
  color: transparent;
}


body, html {
  background-color: #111;
}