JSFiddle - React, Tailwind, and code Playground

by vincentpace

HTML

<div>Here's a regular div. If you highlight text in here and keep dragging the cursor beyond the borders of the div, you might select a bunch of additional stuff that you don't need.</div>
<textarea disabled="disabled">Here's a textarea. You can highlight the text in here and drag all you want... it'll only select from what's in the text area. You need the disabled attribute to prevent the caret from appearing and the glow outline when selecting text here.</textarea>
<div>Another div…</div>
<textarea disabled="disabled">Another text area…</textarea>
<div>Another div…</div>

CSS

body {
    font-family:Helvetica;
    font-size:18px;
}

textarea {
    /* Override textbox font defaults… */
    color:black;
    font-family:Helvetica;
    font-size:18px;
    
    background-color:yellow; /* Just to see where the textareas are */
    padding:0;
    margin:18px 0 18px 0;
    width:100%;
    height:4em;
    border: none;
    resize: none;
}