JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foo">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scaevolam M. Quid enim est a Chrysippo praetermissum in Stoicis? Suo enim quisque studio maxime ducitur. Venit ad extremum; Duo Reges: constructio interrete. Non semper, inquam; Si quicquam extra virtutem habeatur in bonis. Sed tamen intellego quid velit. </p>
</div>

SCSS

.foo {
  position: relative;
  width: 280px;
  color: white;
  font-size: 12px;
  box-shadow: 0 2px 12px 0 rgba(black, .5);

  // Context for position of stroke
  &:before {
    position: absolute;
    top: 0;
    left: 0;
  }

  &:after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 12px 0;
    border-color: tomato transparent transparent transparent;
	filter: drop-shadow(0 0 10px rgba(black, .75));
  }
}

p {
	position: relative;
	z-index: 1;
padding: 20px;
  background: tomato;	
}