JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<div class="ctnr">
    <div class="up-triangle"></div>
</div>
<div class="ctnr">
    <div class="down-triangle"></div>
</div>
<div class="ctnr">
    <div class="left-triangle"></div>
</div>
<div class="ctnr">
    <div class="right-triangle"></div>
</div>
<!-- This is how it should look: <div class="ctnr">
        <code class='info'>.up-triangle</code>
        <div class="up-triangle"></div>
    </div>
-->

SCSS

//Styling stuff not needed for demo
.up-triangle {
    width: 0;
    height: 0;
    border-right: 60px solid transparent;
    border-bottom: 103.92px solid #2963BD;
    border-left: 60px solid transparent;
    margin: auto;
}

.ctnr { display: inline-block; padding: 20px; margin: 10px; background: rgba(black,.2); border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(black,.05), 1px 1px 5px rgba(black,.2); position: relative; }

.info { display: block; padding: 10px; margin-bottom: 10px; background: white; border: #999 1px solid; }

JavaScript

$('.ctnr').each(function () {
    $('<code />')
        .addClass('info')
        .text("." + $(this).find('div').attr('class'))
        .prependTo($(this));
});