JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<svg class="arrow">
&nbsp;
</svg>

CSS

.arrow {
  height: 140px;
  margin: 3px .2em 0 0;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  width: 140px;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="3" dy="3" result="offsetblur" /><feFlood flood-color="rgba(22,22,22,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(2px 2px 2px #161616);
  filter: drop-shadow(2px 2px 2px #161616)
}