JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="Callout">
    <h3 class="Callout-heading">Consectetur voluptatem libero?</h3>
    <p class="Callout-description">
        Dolor aperiam explicabo aut non dolores. Neque quam saepe accusamus placeat ut beatae at!
    </p>
</div>

<div class="Callout -bold">
    <h3 class="Callout-heading">Consectetur voluptatem libero?</h3>
    <p class="Callout-description">
        Dolor aperiam explicabo aut non dolores. Neque quam saepe accusamus placeat ut beatae at!
    </p>
</div>

<div class="Callout -centered">
    <h3 class="Callout-heading">Consectetur voluptatem libero?</h3>
    <p class="Callout-description">
        Dolor aperiam explicabo aut non dolores. Neque quam saepe accusamus placeat ut beatae at!
    </p>
</div>

<div class="Callout -bold -centered">
    <h3 class="Callout-heading">Consectetur voluptatem libero?</h3>
    <p class="Callout-description">
        Dolor aperiam explicabo aut non dolores. Neque quam saepe accusamus placeat ut beatae at!
    </p>
</div>

SCSS

.Callout {
    margin-bottom: 3rem;
    width: 50%;
    background: #fee;

    &.-bold {
        width: 66.666%;
    }

    &.-centered {
        background: red;
        margin-left: auto;
        margin-right: auto;
    }
}