CodePen

HTML

            
              <pre rel="HTML">
		<code>
			&lt;div&gt;A Bunch of Words&lt;/div&gt;
		</code>
</pre>
            
          
!

CSS

            
              pre[rel] {
			padding-top: 33px;
		}
		
		pre {
			overflow: auto;
			color: white;
			background: #1d1f21;
			position: relative;
			padding: 0;
		}
		
		pre[rel]::before {
			content: attr(rel);
			color: white;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: #e18728;
			padding: 5px 0;
			text-indent: 15px;
			font-size: 150%;
		}
		
		pre code {
			display: block;
			padding: 15px 0 15px 0;
			white-space: pre;
			overflow: auto;
		}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................