JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit perferendis suscipit, itaque dolorum provident beatae vitae illum, corrupti iure adipisci impedit quia, nisi ipsum, et sed nostrum ut facilis?</p>
</div>

SCSS

body {
  padding: 20px;
  background: #f1f1f1;
  width: 60%;
}

.block {
  padding: 30px;
  position: relative;
  background: #fff;
  box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.5);

  &:before,
  &:after {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 48px;
    left: 100%;
    transform: rotate(45deg) translateX(-17px);
    content: '';
    background: #fff;
    box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.5);
  }
  
  &:after {
    background: #fff;
    box-shadow: none;
    left: auto;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    transform: none;
  }
}

JavaScript

.block