JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tri-down">Box with Down Triangle a.k.a. "Nubbin"</div>

CSS

.tri-down {

    /* Styling block element, not required */
    position: relative;
    margin-bottom: 2em;
    padding: 1em;
   border-bottom:2px solid #000;
    border-radius:5px;
  }

  /* Required for Down Triangle */
  .tri-down:before, .tri-down:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
  }

  /* Stroke */
 

  /* Fill */
  .tri-down:after {
    bottom: -15px;
    left:21px;
    border-top-color: #000;
    border-width: 15px;
  }