JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<span class="messaggio">Buongiorno, stasera la Juve festeggia lo scudetto!<span class="data"><a href="http://www.idevicelab.net/forum/utente-appessionato">Appessionato</a><span>, 05 Mag 12:14</span></span></span>

CSS

.messaggio {
display: inline-block;
padding: 4px 8px;
margin: 0 9px 6px 6px;
border-radius: 3px;
max-width: 70%;
border: 1px solid #2E2E2E;
position: relative;
width: auto;
background: #242424;
background: -moz-linear-gradient(top,#272727 0%,#242424 40%,#242424 100%);
background: -webkit-linear-gradient(top,#272727 0%,#242424 40%,#242424 100%);
background: -o-linear-gradient(top,#272727 0%,#242424 40%,#242424 100%);
background: linear-gradient(to bottom,#272727 0%,#242424 40%,#242424 100%);
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.messaggio:after, .messaggio:before {
right: 100%;
top: 9px;
border: solid rgba(0, 0, 0, 0);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.messaggio:before {
border-color: rgba(46, 46, 46, 0);
border-right-color: #303030;
border-width: 5px;
}

*:before, *:after {
font-family: FontAwesome;
}

.messaggio {
padding: 0;
width: 100%;
margin: 15px 0;
border-radius: 7px;
}