JSFiddle - React, Tailwind, and code Playground

by comae

HTML

<div class="shadow stripes2px">
  <span style="border: 0.5rem white solid; background-color: rgba(0,0,0,0.7);">
    Houndstooth
  </span>
</div>
<div class="shadow stripes-fade">
  <span style="border: 0.5rem white solid; background-color: rgba(0,0,0,0.7);">
    Houndstooth
  </span>
</div>

CSS

body {
  background: #222;
  color: white;
  font-size: 4em;
  font-family: sans-serif;
  text-align: center;
}

div {
  width: 100%;
  display: flex; 
  align-items: center; 
  height: 400px;
  justify-content: center; /* optional */
}

.shadow {
  -webkit-box-shadow: inset 1px 1px 150px #000;
  -moz-box-shadow: inset 1px 1px 150px #000;
  box-shadow: inset 1px 1px 150px #000;
}

.stripes2px {
  background: repeating-linear-gradient(120.9deg,
      rgba(0, 106, 143, .35) 0,
      rgba(0, 0, 0, 0.9) 1px
      /* transition from previous blue stripe */
      , rgba(0, 0, 0, 0.9) .25em,
      rgba(0, 106, 143, 0.35) calc(.25em + 1px)
      /* from black to blue */
      , rgba(0, 106, 143, .24) .75em),
    repeating-linear-gradient(120deg,
      #0092b7 0,
      #000 1px
      /* transition from previous blue stripe */
      , #000 .25em,
      #0092b7 calc(.25em + 1px)
      /* from black to blue */
      , #0092b7 .75em);
}


.stripes-fade {
  background: repeating-linear-gradient(-74.5deg,
      transparent 0px,
      transparent 4px,
      rgba(255, 255, 255, 0.1) 4.0px,
      rgba(255, 255, 255, 0.9) 5.0px,
      rgba(255, 255, 255, 0.1) 6.0px,
      transparent 6px,
      transparent 20px),
    repeating-linear-gradient(-75deg,
      transparent 0px,
      transparent 4px,
      rgba(255, 255, 255, 0.1) 4.0px,
      rgba(255, 255, 255, 0.9) 5.0px,
      rgba(255, 255, 255, 0.1) 6.0px,
      transparent 6px,
      transparent 20px);
}