JSFiddle - React, Tailwind, and code Playground

by Muhammad Rosyad

HTML

<blockquote>
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</blockquote>

CSS

blockquote{width:40%;background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px;}
blockquote::before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2;}
blockquote::after, q::before, q::after {background: transparent;}
blockquote::after {position: absolute;content: '\f027';right: 10px;bottom: 5px;font-family: FontAwesome;font-style: normal;font-weight: normal;font-size: 160%;color: rgba(255,255,255,.6);}

JavaScript

//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
//]]>