JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="notepaper">
test tejslt test tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest tejslttest
    
    
</div>

<div class="notepaper2">
    
    
</div>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <text fill="#000000" stroke-width="0" x="259" y="132" id="svg_3" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(7.45333 0 0 6.7 -1716.41 -652.6)" stroke="#000000">★</text>
 </g>
</svg>

CSS

.notepaper {
    line-height:1.5;
    width: 500px;
    height: 200px;
    background: -webkit-linear-gradient(#999999 2px , #ef092f 2px , #ef092f 4px , #2ba812 4px);
    background: linear-gradient(#999999 2px , #ef092f 2px , #ef092f 4px , #2ba812 4px);
    background-size: 100% 40px;
    background-position:0 0;
    background-color:#eee;
}

.notepaper2 {
    line-height:1.5;
    width: 400px;
    height: 400px;
    border-radius:50%;
    background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 50% , transparent 50%), linear-gradient(rgba(0,0,0,0.4) 50% , transparent 50%);
    background-size: 30px 30px;
    background-position:0 0;
    background-color:#eee;
}