JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="card card--light">
    <div class="card__body">
        <div class="card__header">
            <div class="card__heading">
                Card heading
            </div>
        </div>
        <div class="card__torso">
            <div class="card__copy">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis ipsum digni.
            </div>
        </div>
        <div class="card__footer">
          <a href="">I am link</a>
        </div>
    </div>
</div>

SCSS

.card {
    $b: &;

    &__body {
        background-color: white;
        border-radius: 0.25rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 1rem;
        padding: 2rem;
    }

    &__heading {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1;
    }


    &--light {
        #{$b}__body {
            border: 0.125rem solid peru;
        }
    }

}




* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: ghostwhite;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    max-width: 500px;
    padding: 1rem;
}