JSFiddle - React, Tailwind, and code Playground

by alanhogan

HTML

<textarea class='x'>Test content
More test content</textarea>
<div class="x">Test content
More test content</div>
<textarea class='x big'>Test content
More test content</textarea>
<div class="x big">Test content
More test content</div>

<p>
This fiddle is to illustrate <a href="https://stackoverflow.com/q/10455465/211327" target="_top">this question</a> and can be solved by switching the order of background and background-clip, <a href="https://jsfiddle.net/BoltClock/7YjCV/12" target="_top">as seen here</a>.
</p>

CSS

.x {
    line-height: 1.29;
    font-size: 16px;
    white-space: pre-wrap;
    padding: 4px 6px;
    margin: 5px;
    display: block;
    width: 300px;
    height: 50px;
    border: 2px inset #888;
    background-clip: content-box;
    background: #ddd none;
    color: black;
    overflow: auto;
    resize: none;
    font-family: inherit;
}
.big {
    line-height: 42px;
    font-size: 24px;
}
.scrnsht {
    border: 3px solid #fdd;
}
div.x {
    border-color: #0a9;
}
textarea.x {
    border-color: #80b;
}