JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<div style="width:950px;height:300px;border:solid 1px #eee;">
    <pre class="figure">$.fx.speeds._default = 300;</pre>
</div>

CSS

pre.figure:after {
content: '';
display: block;
position: absolute;
bottom: -4px;
right: -1px;
border: solid 2px transparent;
border-left-color: #a0c3c3;
border-top-color: #a0c3c3;
width: 0;
height: 0;
z-index: 0;
}
pre.figure {
position: relative;
background: #e0efef;
border: solid 1px #c0d3d3;
font-size: 0.8em;
font-family: menlo, monospace;
width: 320px;
color: #305060;
padding: 10px 20px;
box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
border-top-right-radius: 4px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
/*margin-right: -84px;*/
    margin-right:-5px;
margin-left: 30px;
float: right;
white-space: pre-wrap;
}