JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <h2 class="title">Basic Box</h2>
    <div class="content">
        <p>Fatback chicken shank, turducken meatloaf tenderloin pork. Leberkas ribeye bresaola short ribs. Frankfurter jowl ham hock, short loin t-bone shoulder chicken rump salami. Kevin short loin shankle, turducken boudin tail shoulder chuck kielbasa fatback ball tip pastrami filet mignon. Short ribs fatback jowl, chicken rump leberkas tri-tip brisket sausage hamburger corned beef boudin. Beef biltong cow, chuck andouille sirloin pork loin ribeye. Ground round kevin jowl ribeye shankle.</p>
    </div>
</div>

<div class="box boxImportant">
    <h2 class="title titleImportant">Basic Box</h2>
    <div class="content">
        <p>Fatback chicken shank, turducken meatloaf tenderloin pork. Leberkas ribeye bresaola short ribs. Frankfurter jowl ham hock, short loin t-bone shoulder chicken rump salami. Kevin short loin shankle, turducken boudin tail shoulder chuck kielbasa fatback ball tip pastrami filet mignon. Short ribs fatback jowl, chicken rump leberkas tri-tip brisket sausage hamburger corned beef boudin. Beef biltong cow, chuck andouille sirloin pork loin ribeye. Ground round kevin jowl ribeye shankle.</p>
    </div>
</div>

<div class="box boxInfo">
    <h2 class="title titleInfo">Basic Box</h2>
    <div class="content">
        <p>Fatback chicken shank, turducken meatloaf tenderloin pork. Leberkas ribeye bresaola short ribs. Frankfurter jowl ham hock, short loin t-bone shoulder chicken rump salami. Kevin short loin shankle, turducken boudin tail shoulder chuck kielbasa fatback ball tip pastrami filet mignon. Short ribs fatback jowl, chicken rump leberkas tri-tip brisket sausage hamburger corned beef boudin. Beef biltong cow, chuck andouille sirloin pork loin ribeye. Ground round kevin jowl ribeye shankle.</p>
    </div>
</div>

<div class="box boxImportant">
    <h2 class="title titleInfo">Basic Box</h2>
    <div class="content">
        <p>Fatback chicken shank, turducken...

CSS

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}

body { font:1em/1.4 "Nimbus Sans L", "Freesans", sans-serif; color: #444; background: #fff }

.box {
    display: inline-block;
    width: 44%;
    margin: 2.5%;
    border: 1px solid #ccc;
}

.title {
    padding: 1ex;
    font-size: 1.2em;
    border-bottom: 1px solid #ddd;
}

.content {
    padding: 1ex;
}

/* Important */

.boxImportant {
    color: #333;
    background: #e77f74;
    border: 0;
}

.titleImportant {
    color: #fff;
    font-weight: 700;
    background: #c0392b;
    border: 0;
}

/* Info */

.boxInfo {
    border-color: #0e2f3f;
}

.titleInfo {
    color: #fff;
    font-weight: 700;
    background: #0e2f3f;