JSFiddle - React, Tailwind, and code Playground

by Clemens

HTML

<textarea>This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

Great.
</textarea>

CSS

html{ height: 100%; }
body
{
    background-color: #f5f5f5;
}
textarea
{
    border: 1px solid #EEEEEE;
    box-shadow: 1px 1px 0 #DDDDDD;
    display: block;
    font-family: 'Marck Script',cursive;
    font-size: 22px;
    line-height: 50px;
    margin: 2% auto;
    padding: 11px 20px 0 70px;
    resize: none;
    height: 689px;
    width: 530px;
    
    background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 
    background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%);
    
    -webkit-background-size:  100% 50px;
    background-size: 100% 50px;
}