JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="card inverted gridify tiny"></div>

<!-- https://freebiesupply.com/blog/css-background-patterns/ -->

CSS

body{
  margin: 0;
}

.card {
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0 0px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.card.inverted {
  width: 100%;
  background: #445963;

}

.gridify.tiny {
  background-image: 
	linear-gradient(transparent 7px, #ff0000 8px, transparent 8px),
	linear-gradient(90deg, transparent 7px, #ff0000 8px, transparent 8px);
	background-size: 100% 8px, 8px 100%;
}