<div class="flex flex-wrap">
  <div class="w-25pc h-1by1 pattern-checks-md pink-lightest bg-red-dark"></div>
  <div class="w-25pc h-1by1 pattern-grid-md yellow-darker bg-yellow"></div>
  <div class="w-25pc h-1by1 pattern-dots-md yellow bg-indigo"></div>
  <div class="w-25pc h-1by1 pattern-cross-dots-md white bg-black-70"></div>

  <div class="w-25pc h-1by1 pattern-diagonal-lines-md red bg-black"></div>
  <div class="w-25pc h-1by1 pattern-horizontal-lines-md mint-darker bg-mint"></div>
  <div class="w-25pc h-1by1 pattern-vertical-lines-md indigo bg-blue-lighter"></div>
  <div class="w-25pc h-1by1 pattern-diagonal-stripes-md white bg-blue"></div>

  <div class="w-25pc h-1by1 pattern-horizontal-stripes-md white bg-indigo"></div>
  <div class="w-25pc h-1by1 pattern-vertical-stripes-md purple-darkest bg-red-light"></div>
  <div class="w-25pc h-1by1 pattern-triangles-md yellow bg-indigo"></div>
  <div class="w-25pc h-1by1 pattern-zigzag-md yellow bg-red"></div>
</div>

<div class="flex flex-wrap">
  <div class="w-25pc h-1by1 pattern-checks-md slategray-lightest"></div>
  <div class="w-25pc h-1by1 pattern-grid-md slategray-lighter"></div>
  <div class="w-25pc h-1by1 pattern-dots-md slategray-lighter"></div>
  <div class="w-25pc h-1by1 pattern-cross-dots-md slategray-lighter"></div>

  <div class="w-25pc h-1by1 pattern-diagonal-lines-md slategray-lighter"></div>
  <div class="w-25pc h-1by1 pattern-horizontal-lines-md slategray-lighter"></div>
  <div class="w-25pc h-1by1 pattern-vertical-lines-md slategray-lighter"></div>
  <div class="w-25pc h-1by1 pattern-diagonal-stripes-md slategray-lightest"></div>

  <div class="w-25pc h-1by1 pattern-horizontal-stripes-md slategray-lightest"></div>
  <div class="w-25pc h-1by1 pattern-vertical-stripes-md slategray-lightest"></div>
  <div class="w-25pc h-1by1 pattern-triangles-md slategray-lightest"></div>
  <div class="w-25pc h-1by1 pattern-zigzag-md slategray-lightest"></div>
</div>

<div class="flex flex-wrap bg-slategray-darkest">
  <div class="w-25pc h-1by1 pattern-checks-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-grid-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-dots-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-cross-dots-md slategray-darker"></div>

  <div class="w-25pc h-1by1 pattern-diagonal-lines-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-horizontal-lines-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-vertical-lines-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-diagonal-stripes-md slategray-darker"></div>

  <div class="w-25pc h-1by1 pattern-horizontal-stripes-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-vertical-stripes-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-triangles-md slategray-darker"></div>
  <div class="w-25pc h-1by1 pattern-zigzag-md slategray-darker"></div>
</div>

<a href="https://github.com/bansal-io/pattern.css" class="fixed z-100 bottom-0 right-0 bg-white-50 black hover-red fs-s2 px-3 py-2 no-underline mono">built with pattern.css</a>