JSFiddle - React, Tailwind, and code Playground

by shyamh

HTML

<div class="triangle-border-left">
    <div>
        <div>
            <div style="width: 50px; height: 50px; background-image: url(http://localhost:3000/images/compSpritesButtonsIcons.png?5); background-position: -280px -5px; background-repeat: no-repeat no-repeat; float: left; ">
            </div>
            <div style="margin-left: 55px; float: top;">
            <!-- start slipsum code -->

                Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.<br/><br/>

                Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.<br/><br/>

<!-- please do not remove this line -->
            </div>
        </div>
    </div>
</div>

CSS

/* based on http://bit.ly/RSKum8 */

body {
    font:0.82em/1.0 Tahoma, Arial, sans-serif; 
    color:#333; 
}

.content {
    position:relative;
    z-index:1;
}

.content {
    position:relative;
    z-index:1;
}

.triangle-border-left {
    position:relative;
    padding:5px;
    margin:1em 0 3em;
    border:1px solid #e9e9e9;
    background:#fff;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:5px;
    margin-left:18px;
    margin-right:2px;
}

.triangle-border-left:before {
    content:"";
    position:absolute;
    top:18px;
    bottom:auto;
    left:-16px;
    border-width:12px 16px 12px 0;
    border-color:transparent #ccc;
    border-style:solid;
    display:block; 
    width:0;
}

.triangle-border-left:after {
    content:"";
    position:absolute;
    top:19px;
    bottom:auto;
    left:-15px;
    border-width:11px 15px 11px 0;
    border-color:transparent #fff;
    border-style:solid;
    display:block; 
    width:0;
}