JSFiddle - React, Tailwind, and code Playground
HTML
<table class="code">
<tr>
<th data-line-number="1"></th>
<td>public static function autoload($className)</td>
</tr>
<tr>
<th data-line-number="2"></th>
<td>{</td>
</tr>
<tr>
<th data-line-number="3"></th>
<td> if (isset(static::$classMap[$className])) {</td>
</tr>
<tr>
<th data-line-number="4"></th>
<td> $classFile = static::$classMap[$className];</td>
</tr>
<tr>
<th data-line-number="5"></th>
<td> if ($classFile[0] === '@') {</td>
</tr>
<tr>
<th data-line-number="6"></th>
<td> $classFile = static::getAlias($classFile);</td>
</tr>
<tr>
<th data-line-number="7"></th>
<td> }</td>
</tr>
<tr>
<th data-line-number="8"></th>
<td> } elseif (strpos($className, '\\') !== false) {</td>
</tr>
<tr>
<th data-line-number="9"></th>
<td> $classFile = static::getAlias('@' . str_replace('\\', '/', $className) . '.php', false); // this line is pretty long and will be wrapped for sure. Let's check what happens...</td>
</tr>
<tr>
<th data-line-number="10"></th>
<td> if ($classFile === false || !is_file($classFile)) {</td>
</tr>
<tr>
<th data-line-number="..."></th>
<td>...</td>
</tr>
<tr>
<th data-line-number="22"></th>
<td>}</td>
</tr>
</table>
CSS
.code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
border-collapse: collapse;
line-height: 18px;
font-size: 13px;
}
.code th {
color: #333;
background: #eee;
border-right: 1px solid #ddd;
text-align: right;
vertical-align: top;
padding: 0 8px 0 8px;
}
.code th:before {
content: attr(data-line-number);
}
.code td {
white-space: pre-wrap;
padding-left: 10px;
}