<div class="sb:shadows">
  <div class="sb:shadow-block pl-shadow-none">
    <p><b>None</b></p>
    <p><i>.shadow-none</i></p>
  </div>
  <div class="sb:shadow-block pl-shadow-sm">
    <p><b>Small</b></p>
    <p><i>.shadow-sm</i></p>
    <p>Offset X 4px</p>
    <p>Offset Y 4px</p>
    <p>Blur 20px</p>
  </div>
  <div class="sb:shadow-block pl-shadow-md">
    <p><b>Medium</b></p>
    <p><i>.shadow-md</i></p>
    <p>Offset X 8px</p>
    <p>Offset Y 8px</p>
    <p>Blur 20px</p>
  </div>
  <div class="sb:shadow-block pl-shadow-lg">
    <p><b>Large</b></p>
    <p><i>.shadow-lg</i></p>
    <p>Offset X 12px</p>
    <p>Offset Y 12px</p>
    <p>Blur 20px</p>
  </div>
</div>
<div class="sb:shadows">
  <div class="sb:shadow-block pl-hover:shadow-none">
    <p><b>Hover None</b></p>
    <p><i>.hover:shadow-none</i></p>
  </div>
  <div class="sb:shadow-block pl-hover:shadow-sm">
    <p><b>Hover Small</b></p>
    <p><i>.hover:shadow-sm</i></p>
    <p>Offset X 4px</p>
    <p>Offset Y 4px</p>
    <p>Blur 20px</p>
  </div>
  <div class="sb:shadow-block pl-hover:shadow-md">
    <p><b>Hover Medium</b></p>
    <p><i>.hover:shadow-md</i></p>
    <p>Offset X 8px</p>
    <p>Offset Y 8px</p>
    <p>Blur 20px</p>
  </div>
  <div class="sb:shadow-block pl-hover:shadow-lg">
    <p><b>Hover Large</b></p>
    <p><i>.hover:shadow-lg</i></p>
    <p>Offset X 12px</p>
    <p>Offset Y 12px</p>
    <p>Blur 20px</p>
  </div>
</div>