JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<div class="topArrow">
    <div class="inner"></div>
</div>


<div class="infoBox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, veniam. Illo nemo perferendis earum in minima rerum! Laborum praesentium ratione nostrum repellat, perspiciatis recusandae modi cum ipsum voluptate soluta beatae.
<BR>
erazerazerza
<br>
<button>
action
</button>

</div>

<div class="bottomArrow">
    <div class="inner"></div>
</div>

CSS

body {
    padding: 20px;
}


.infoBox {
    border: 1px solid #f0b323;
    background-color: #fffbf3;
    padding: 16px;
}



.topArrow {
    left: 10%;
    top: 1px;
    z-index: 1;
    position: relative;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid #f0b323;
}

.topArrow .inner {
    position: absolute;
    top: 1px;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fffbf3;
}


.bottomArrow {
    left: 30px;
    top: -1px;
    z-index: 1;
    position: relative;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid #f0b323;
}

.bottomArrow .inner {
    position: absolute;
    top: -12px;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fffbf3;
}