JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<div class="content-script">
<div class="arrow">
<div style="position: relative; left: -2px; font-family: Verdana; font-weight: bold; color: #fff;">    
&lt;
</div>
</div>
<p id="left">
Ciao Ciao ciao 
</p>
</div>

CSS

.content-script {
    background: white;
    border: 1px solid #C0C6C6;
    padding: 10px;
    color: #43586D;
    font-style: italic;
    width: 150px;
    margin-left: 50px;
    margin-top: 30px;
    text-align: center;
    -moz-box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
    box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
}

.arrow {
    border: none;
    height: 30px;
    width: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    position: relative;
    left: -25px;
    float: left;
    bottom: 4.9px;
    background-image: linear-gradient(bottom, #389EA7 0%, #74D4D7 85%);
    background-image: -o-linear-gradient(bottom, #389EA7 0%, #74D4D7 85%);
    background-image: -moz-linear-gradient(bottom, #389EA7 0%, #74D4D7 85%);
    background-image: -webkit-linear-gradient(bottom, #389EA7 0%, #74D4D7 85%);
    background-image: -ms-linear-gradient(bottom, #389EA7 0%, #74D4D7 85%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #389EA7), color-stop(0.85, #74D4D7) );
    -moz-box-shadow: 0px 1px 0px #277278, 0px -1px 0px #9af5f8, 1px 0px 0px #3babb4, -1px 0px 0px #3babb4;
    -webkit-box-shadow: 0px 1px 0px #277278, 0px -1px 0px #9AF5F8, 1px 0px 0px #3BABB4, -1px 0px 0px #3BABB4;
    box-shadow: 0px 1px 0px #277278, 0px -1px 0px #9AF5F8, 1px 0px 0px #3BABB4, -1px 0px 0px #3BABB4;
    line-height: 29px;
    text-shadow: 0px 1px 0px #277278;
}

#left {
    position: relative;
    left: -15px;
}