Sublime Editor

<section class="container">
  
  <h1>The Sublime Editor basic window in CSS/HTML/JS</h1>
  <h2>You can maximise it too with the buttons, it's also responsive</h2>
  
  <div class="sublime">

<header class="sublime__title">Sublimey Text</header>

<ul class="sublime-tabs">
      <li class="sublime-tabs__tab">
        <a href="#_github/index" class="sublime-tabs__link" data-type="html" data-project="index">index.html</a>
      </li>
      <li class="sublime-tabs__tab">
        <a href="#_github/mainjs" class="sublime-tabs__link" data-type="js" data-project="mainjs">main.js</a>
      </li>
      <li class="sublime-tabs__tab">
        <a href="#_github/maincss" class="sublime-tabs__link" data-type="css" data-project="maincss">main.css</a>
      </li>
      <li class="sublime-tabs__tab sublime-tabs__tab--soon">
        <a href="#" class="sublime-tabs__link" data-type="canvas" data-project="">sublime.css</a>
      </li>
    </ul>

<button class="sublime__button sublime__button--full js-sublime-maximise" tabindex="-1">go fullscreen</button>
    <button class="sublime__button sublime__button--maxi js-sublime-toggle" tabindex="-1">maximise</button>
    <button class="sublime__button sublime__button--exit js-sublime-minimise" tabindex="-1">exit</button>

<h4 class="sublime-project__title">HTML Example</h4>

&lt;ul&gt;
   &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
   &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
   &lt;li&gt;Vestibulum auctor dapibus neque.&lt;/li&gt;
&lt;/ul&gt;
	       
      </pre>

</div>

<h4 class="sublime-project__title">Javascript File</h4>

<pre class="sublime-project__code prettyprint lang-js linenums">
function Class(){
    this.method = function(){alert('simple method')};
}
// some random JS
var object = new Class();
object.method();
      </pre>

</div>

<pre class="sublime-project__code prettyprint lang-css linenums">
position: fixed;
top: 0;
right: 0;
width: 100%;

font-family: "Source Code Pro", Consolas, "Courier New", monospace;
font-size: 1em;
font-weight: 400;
z-index: 40;

background: 
    linear-gradient( 
        to top , 
        rgba(255,255,255,0.8), 
        rgba(255,255,255,0.6) 
    );

box-shadow: 
    inset 0 -1px 1px rgba(255,255,255,1), 
    inset 0 -3px 3px rgba(255,255,255,0.7), 
    0 0 20px rgba(0,0,0,0.2);
</pre>

</div>

</div>

</section>