JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editor" contenteditable="true" spellcheck="false">
    <p>Some paragraph</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat. In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

CSS

.editor {
    display: inline-block;
    border: 1px black solid;
    font-family:"Consolas", "Monaco", "Courier New", monospace;
    counter-reset: line;
    width:90%;
    height:350px;
    overflow:scroll;
    padding-left:0;
    margin-left:0;
    z-index:1;
}
.editor p {
    display: block;
    counter-increment: line;
    background-color:#FFF;
    text-align:left;
    margin:0px;
    z-index:2;
    outline: none;
    position:relative;
    padding-left:3.5em;
}
.editor p:before {
    display:inline-block;
    width:2em;
    height:100%;
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;
    content: counter(line);
    color:#FFF;
    background-color:#006;
    text-align:right;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    /*-webkit-user-select: none;
    user-select: none;*/
}
.editor p:after {
    content:" "
}