JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<div class="button-action">
    <img class="button-action--icon" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=icon&w=100&h=100" alt="Do this!">
    <label class="button-action--label">News</label>
</div>
<div class="button-action">
    <img class="button-action--icon" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=icon&w=100&h=100" alt="Do this!">
    <label class="button-action--label">News</label>
</div>
<div class="button-action">
    <img class="button-action--icon" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=icon&w=100&h=100" alt="Do this!">
    <label class="button-action--label">News</label>
</div>
<div class="button-action">
    <img class="button-action--icon" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=icon&w=100&h=100" alt="Do this!">
    <label class="button-action--label">News</label>
</div>

CSS

.button-action {
    background: green;
    margin: 20px;
    padding: 10px;
    color: white;
}
.button-action--icon {
    vertical-align: middle;
    padding-right: 10px;
}
.button-action--label {
    vertical-align: middle;
}