JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div{
    height:300px;
    width:300px;
    background-color:#bfbfbf;
    background-image:

        linear-gradient(transparent 50%, red 50%),
        linear-gradient(90deg, transparent 50%, red 50%),
        linear-gradient(green 50%, blue 50%);


    background-size:
        
         30px 30px,
         30px 30px, 
         100% 100%;
   
    background-clip: 
        
         border-box,
         border-box, 
         padding-box; 
   
    background-repeat: repeat;
    
    border: 30px solid rgba(55,255,255,0.5); 
   
   
    }