JSFiddle - React, Tailwind, and code Playground

by vajnabotond

HTML

<div class = 'nofill'></div>
<div class = 'hex'></div>
<div class = 'red'></div>

CSS

.nofill {
  width: 100%;
  height: 10px;
  /* background-color: #000; */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;
}
.hex {
  width: 100%;
  height: 10px;
  /* background-color: #000; */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='#FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;
}
.red {
  width: 100%;
  height: 10px;
  /* background-color: #000; */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='red' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;
}