JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<section class="container">
  </div>

CSS

/* Pen-specific styles */
html, body { 
  height: 100%;
  background-image: url("5http://www.transparenttextures.com/patterns/3px-tile.png");
}

/* Pattern styles */
.container {

  background-image: 
    
    linear-gradient(
    to bottom, 
    rgba(127, 180, 220, 0.9) 0%, 
    rgba(127, 180, 220, 0.9) 50%, 
    rgba(0, 0, 0, 0) 50%, 
    rgba(0, 0, 0, 0) 100%
   
  ) 
 ;
  height: 100%;
  width: 100%;
}


/*
how do I add this texture to the top (blue) half of the container?

background-image: url("http://www.transparenttextures.com/patterns/candyhole.png");

*/