JSFiddle - React, Tailwind, and code Playground
HTML
<div id="baloon">
ספלאשש!!!
<span class="baloon-tip">▼</span>
</div>
CSS
#baloon {
position: relative;
background: #FFF;
box-shadow: -5px 2px 5px rgba(0,0,0,0.3); border-radius: 3px;
-webkit-box-shadow: -1px 2px 5px rgba(0,0,0,0.3); -webkit-border-radius: 8px;
-moz-box-shadow: -1px 2px 5px rgba(0,0,0,0.3); -moz-border-radius: 3px;
}
.baloon-tip {
display: block; position: absolute; bottom: -12px; right: 12px;
line-height: 16px; font-size: 16px; font-family: arial, sans-serif;
text-shadow: -1px 2px 5px rgba(0,0,0,0.3); color: #FFF;
}
/* לא חשוב */
body {background: #EEE; direction: rtl; font-family: arial, sans-serif; margin: 20px;}
#baloon {
width: 113px;
margin: 0 auto; padding: 10px 15px;
font-family: "Guttman Haim", arial, sans-serif; font-size: 22px; font-style: italic; font-weight: 900;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
}