JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div contenteditable>
  <div class="compound-statement">{<newline>
</newline><sp> </sp><sp> </sp><div class="block">a</div><newline class="hover">
</newline><sp> </sp><sp> </sp><div class="block">b</div><newline>
</newline><sp> </sp><sp> </sp><div class="block">c</div><newline>
</newline>
<div class="compound-statement">{<newline>
</newline><sp> </sp><sp> </sp><div class="block">a</div><newline>
</newline><sp> </sp><sp> </sp><div class="block">b</div><newline>
</newline><sp> </sp><sp> </sp><div class="block">c</div><newline class="hover">
</newline>}
</div><newline>
</newline class="hover">}
</div>

CSS

*, *::before, *::after{
  position:relative;
  box-sizing:border-box;
}

.compound-statement{
  white-space:pre;
  border:1px solid hsla(120,100%,50%,0.1);
  padding-left:16px;
}

.block{
  display:inline;
  background:hsla(90,50%,50%,0.3);
}

newline{
  display:inline;
  background:hsla(0,100%,50%,0.1);
}

newline.hover::after, 
newline:hover::after
{
  content:"  \a";
  background-image:linear-gradient(gray, gray);
  padding-right:100px;
  background-repeat:no-repeat;
  background-size:100px 100%;
  background-position:right -100% top 0;
}

newline.hover ~ .block:first-child{
  background-color:lightgray;
}