JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,700"></script>
<div class="note">
<h3>Note title</h3>
<p>Vestibulum rhoncus mattis ipsum, ac rutrum lectus imperdiet nec. Cras ut neque orci, vitae semper dolor. Sed id elit ut risus blandit pellentesque.</p><p>Maecenas et consectetur felis. Nulla facilisi. Quisque viverra aliquet varius. Phasellus adipiscing aliquet sodales. Proin nec leo sed orci porta blandit et in lacus. Proin dignissim nulla ac lorem suscipit posuere.</>
</div>

CSS

body{
    padding: 50px;
    font-family: 'Open Sans', sans-serif;
}
.note{
    background: #6FD0E8;
    color: white;
    padding: 20px;
    width: 250px;
    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.note:after{
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    
    position: absolute;
    margin-top: -30px;
    margin-left: 220px;
    
    border-top: 25px solid #8CECFF;
    border-bottom: 25px solid white;
    border-left: 25px solid #8CECFF;
    border-right: 25px solid white;
    
    -webkit-border-top-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomright: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.note h3{
    font-size: 150%;
    font-weight: bold;
}
.note p{
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 95%;
}