JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<form action="">

  <div>
    <label for="school">School Name:</label>
    <input id="school" name="schoo" type="text" placeholder="Cherry River Middle School">
  </div>



</form>

CSS

label {
  display: block;
  color: white;
  margin: 0 0 4px;
}

input {
  border: #000;
  padding: 10px;
  font-size: 1.2em;
  width: 100%;
  background: #333;
  color: white;
}

label,
input {
  font-family: sans-serif;
}

form {
  width: 65%;
}

body {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

::placeholder {
  color: gray;
  background: #333;
}

:placeholder-shown {
  color: gray;
  background: #333;
}