JSFiddle - React, Tailwind, and code Playground

by Jonas Schubert Erlandsson

HTML

<body>
  <section class="rules">
    <div class="counter" style="width:0"></div>
    <div id="rule0">
    <lable for="rule0">Rule 0:</lable>
    <input name="rule0" class="rule0" readonly value="101"/>
    <lable for="rule1">Rule 1:</lable>
    <input name="rule1" class="rule1" readonly value="01"/>
    <lable for="rule2">Rule 2:</lable>
    <input name="rule2" class="rule2" readonly value="100H"/>
  </section>
  <section class="current-state">
    <lable for="data">Data:</lable>
    <input name="data" type="text" pattern="1(0|1|H)*" value="1001" />
    <p class="valid">Copy the content of the next rule to the end of the data and delete the first character.</p>
    <p class="invalid">Delete the first character of the data</p>
    <p class="next-rule"></p>
  </section>
</body>

CSS

.current-state input:valid {
  background-color: green;
  color: white;
}

.current-state input:invalid {
  background-color: red;
  color: white;
}

.current-state .valid, .current-state .invalid {
  display: none;
}

.current-state input:valid ~ .valid {
  display: block;
}

.current-state input:invalid ~ .invalid {
  display: block;
}

.current-state .next-rule:before {
  content: "Next rule : " counter(rule);
}

.rules .rule0:focus {
  counter-increment: rule;
}

.rules .rule1:focus {
  counter-increment: rule 2;
}

.rules .rule2:focus {
  counter-reset: rule;
}