JSFiddle - React, Tailwind, and code Playground

blurred text overlay

by nilloc

HTML

<div id="holder">
<div class="covered">
  <pre id="code-block">
<span class="orange">task main</span> ()
{
  <span class="gray">/*Integer variable that allows you to 
		specify a "deadzone" where values (both
    positive or negative) */</span>
  <span class="gray">//less than the threshold will be ignored.</span>
  <span class="orange">int</span> threshold = 10;

  <span class="gray">//Loop Forever</span>
  <span class="orange">while</span> ( 1 == 1 ) {
    <span class="gray">//Get the Latest joystick values</span>
    <span class="red">missingMethodCall</span>( <span class="blue">joystick</span> );
    <span class="orange">if</span>( <span class="orange">abs</span>( <span class="blue">joystick.joy1_y2</span> ) > threshold )
    {   }
    <span class="orange">if</span> ( <span class="blue">true</span> ) {   }
  }
}
  </pre>
</div>
  <div class="blurred offset">
    <pre id="code-block">
  <span class="orange">task main</span> ()
  {
    <span class="gray">/*Integer variable that allows you to 
      specify a "deadzone" where values (both
      positive or negative) */</span>
    <span class="gray">//less than the threshold will be ignored.</span>
    <span class="orange">int</span> threshold = 10;

    <span class="gray">//Loop Forever</span>
    <span class="orange">while</span> ( 1 == 1 ) {
      <span class="gray">//Get the Latest joystick values</span>
      <span class="red">missingMethodCall</span>( <span class="blue">joystick</span> );
      <span class="orange">if</span>( <span class="orange">abs</span>( <span class="blue">joystick.joy1_y2</span> ) > threshold )
      {   }
      <span class="orange">if</span> ( <span class="blue">true</span> ) {   }
    }
  }
    </pre>
  </div>
</div>

SCSS

/* task main () { /*Int: */
#holder{
  position: relative;
  height:200px;
  overflow:auto;
  background:white;
}
pre{
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}
$blue: #2E78CF;
$gray: #999;
$orange: #E05D00;
$red: #c00;

.blue{   color: $blue; }
.gray{   color: $gray; }
.orange{ color: $orange; }
.red{    color: $red; }

.blurred{
  background:white;
  filter: blur(2px);
  
}

.offset{
  position:absolute;
  left:200px;
  top:0;
  width: 330px;
  height: 350px;
  overflow:hidden;
  pre{
    left:-217px;
    opacity: 0.5;
  }
}