JSFiddle - React, Tailwind, and code Playground

HTML

<!--- No apparent knowledge of what each class belongs too, or what would happen if you amended the CSS of them. Also, what happens if one of the classes is removed from the CSS document, you could have these classes scattered anywhere in your HTML --->
<div class="tweet-card display-b border-red padding-small">
    <button class="btn-med border-red">Follow</button>
    <button class="btn-med border-blue">Share</button>
</div>

<!--- a block that's encapsulated. You can see that each item belongs to a single class, and can safely move the code around, or amend a part of the CSS without an issue --->
<div class="TweetCard">
    <button class="TweetCard-button TweetCard-button--follow">Follow</button>
    <button class="TweetCard-button TweetCard-button--share">Share</button>
</div>

CSS

.tweet-card {
    height: 50px;
}

.display-b {
    display: block;
}

.border-red {
    border: 1px solid red;
}

.border-blue {
    border: 1px solid blue;
}

.padding-small {
    padding 1em;
}

.btn-med {
    padding: 0.8em;
}
/* --- */

.TweetCard {
    height: 40px;
    border: 1px solid blue;
}
.TweetCard-button {
    padding: 0.8em;
}
.TweetCard-button--follow {
    border: 1px solid red;
}
.TweetCard-button--share {
    border: 1px solid blue;
}