JSFiddle - React, Tailwind, and code Playground
HTML
<table class="code">
<tr data-line-number="1">
<td>public static function autoload($className)</td>
</tr>
<tr data-line-number="2">
<td>{</td>
</tr>
<tr data-line-number="3">
<td> if (isset(static::$classMap[$className])) {</td>
</tr>
<tr data-line-number="...">
<td>...</td>
</tr>
<tr data-line-number="22">
<td>}</td>
</tr>
</table>
CSS
.code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
border-collapse: collapse;
line-height: 18px;
font-size: 13px;
}
.code tr:before {
content: attr(data-line-number);
color: #333;
background: #eee;
border-right: 1px solid #ddd;
text-align: right;
vertical-align: top;
padding: 0 8px 0 8px;
display: table-cell;
}
.code td {
white-space: pre-wrap;
padding-left: 10px;
}