JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="notepaper">
    So what tips can you give me to live a more healthy lifestyle? Any advice would be much appreciated!
    So what tips can you give me to live a more healthy lifestyle? Any advice would be much appreciated!
    So what tips can you give me to live a more healthy lifestyle? Any advice would be much appreciated!
    So what tips can you give me to live a more healthy lifestyle? Any advice would be much appreciated!
    So what tips can you give me to live a more healthy lifestyle? Any advice would be much appreciated!
</div>

CSS

.notepaper {
    font:12px/2.4 Tahoma Serif;
    color:#5a4f43;
    border:1px solid #c6bfac;
    width:500px;
    padding:35px 20px 30px 58px;
    background-color:#f5f8d1;
    background-image: -webkit-linear-gradient(left, transparent 28px, #f0d4b1 28px, #f0d4b1 29px, transparent 29px, transparent 32px, #f0d4b1 32px, #f0d4b1 35px, transparent 35px, transparent), -webkit-linear-gradient(top, transparent 28px, #f0d4b1 28px, #f0d4b1);
    background-image: linear-gradient(left, transparent 28px, #f0d4b1 28px, #f0d4b1 29px, transparent 29px, transparent 32px, #f0d4b1 32px, #f0d4b1 35px, transparent 35px, transparent), -webkit-linear-gradient(top, transparent 28px, #f0d4b1 28px, #f0d4b1);
    background-repeat:repeat-y,repeat;
    background-size:100% 29px;
    box-shadow:inset 0 0 3px 3px rgba(195,200,126,0.4), inset 0 1px 1px 1px rgba(242,245,208,0.9);
    resize:both;
}