JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div class="ve-arrow-box">
    <div class="ve-arrow-box-content">
        Some contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome content
    </div>
</div>

CSS

.ve-arrow-box-content {
    height:60px;
    overflow:hidden;
    color:#fff;
}
.ve-arrow-box {
    position: relative;
    background: purple;
    text-align:center;
    padding:5px;
    width:100px;
}
.ve-arrow-box:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: purple;
    border-width: 12px;
    margin-left: -12px;
}