JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c">
  <h2>Demo for <code>:read-only</code> and <code>:read-write</code></h2>
  This input is "readonly":
  <input type="text" readonly>
  <br> This input is "disabled":
  <input type="text" disabled>
  <br> This input is normal:
  <input type="text">
  <br>

  <div class="ce" contenteditable>This div is contenteditable</div>
  
  <div class="ro">This div has nothing special.</div>
  
  <p><strong>Legend:</strong> Red outline: read-write; Blue outline: read-only</p>
  
  <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/future-generation-css-selectors-level-4" target="_blank">See article</a>.</p>
  
</div>

CSS

body {
  line-height: 2em;
}

.c {
  width: 600px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

input:read-write, .ce:read-write, .ro:read-write {
  outline: solid 1px red;
}

input:read-only, .ce:read-only, .ro:read-only {
  outline: solid 1px blue;
}