JSFiddle - React, Tailwind, and code Playground

Basic Editor CSS (containers) example.

by nilloc

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id='app' class='container stack'>
  
  <div class='code-row container stack'>
    <div class='number'>1</div>
    <div class='code-holder indent-1 container horizontal'>
      <code class='code-block'>testFunctionCall( <code class='code-block argument'>argument</code> );</code>
    </div>
  </div>
  
  <div class='code-row container stack'>
    <div class='number'>2</div>
    <div class='code-holder indent-1 container horizontal'>
      <code class='code-block open'>motor</code>
      <code class='dot'>.</code>
      <code class='code-block'>testFunctionCall( <code class='code-block argument'>argument</code> );</code>
    </div>
  </div>
  
  <div class='code-row container stack'>
    <div class='number'>3</div>
    <div class='code-holder indent-1 container horizontal'>
      <div class='code-block'><div class='block-collapse lines-3'><span class='fa fa-chevron-circle-down collapse-button'></span></div>while( <code class='code-block argument'>argument</code> ){</div>
    </div>
  </div>
  
  <div class='code-row container stack'>
    <div class='number'>4</div>
    <div class='code-holder indent-1 container horizontal'>
      <code class='space'>&nbsp;</code>
      <code class='space'>&nbsp;</code>
      <code class='code-block open'>motor</code>
      <code class='dot'>.</code>
      <code class='code-block'>testFunctionCall( <code class='code-block argument'>argument</code> );</code>
    </div>
  </div>
  
  <div class='code-row container stack'>
    <div class='number'>5</div>
    <div class='code-holder indent-1 container horizontal'>
      <code class='code-block'>}</code>
    </div>
  </div>
  
</div>

SCSS

* { box-sizing: border-box }

.fa{
  position:relative;
  font-size:23px;
  top:-2px;
}

#app{
  background:#333;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  font:16px monospace;
  
  div{
    position:relative;
    background:rgba(255,255,255,0.25);
  }
  
  .code-row{
    left:0;
    right:0;
    height:40px;
    
    & .indent-1{
      padding-left:100px;
    }
    
    &:hover{
      background:#c07712;
    }
    

    
    .code-holder{
      min-height:40px;
      padding-top:2px;
      padding-bottom:0;
      
      .code-block{
        background:rgba(255,255,255,0.5);
        border-radius:4px;
        display:inline-block;
        height:36px;
        padding:8px;
        &:hover{
          background:rgba(255,255,255,0.75);
          cursor:pointer;
          .code-block{
            &:hover{
              background:rgba(255,255,255,1);
            }
            background:rgba(55,55,55,0.3);
            height:30px;
            padding:5px 8px;
            margin-top:-5px;
          }
        }
        .code-block{
          height:30px;
          padding:5px 8px;
          margin-top:-5px;
        }
        .block-collapse{
          position:absolute;
          left:-30px;
          top:10px;
          border-radius:20px;
          width:20px;
          min-height:20px;
          background:#f1e57a;
          z-index:20;
          
          &>.collapse-button{
            color:#fab135;
          }
          
          @for $i from 1 through 10 {
            &.lines-#{$i}{
               height:($i * 40px) - 20px;
            }
          }
        }  
      }
    }
    
    .dot, .space, .tab{
      padding:0;
      margin-left:-4px;
      margin-right:-4px;
    }
    
    .number{
      position:absolute;
      left:0;
      top:0;
      width:60px;
      min-height:40px;
      text-align:center;
      padding:10px;
    }
  }
}