JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div class="actions-layer">
    <a href="#" class="action-item action-notes">
        <i class="action-icon"></i>
        <span class="action-title">Notes</span>
    </a>
    <a href="#" class="action-item action-save">
        <i class="action-icon"></i>
        <span class="action-title">Save inspection</span>
    </a>
    <a href="#" class="action-item action-cancel">
        <i class="action-icon"></i>
        <span class="action-title">Cancel inspection</span>
    </a>
</div>

SCSS

.actions-layer {
    background: rgba(0, 0, 0, .7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 501;
    display: flex;
    align-items: center;
    justify-content: center;
    .action-item {
        width: 104px;
        height: 104px;
        border-radius: 10px;
        margin: 6px;
        color: white;
        text-decoration: none;
        &.action-notes {
            background-color: #00A9E7;
        }
        &.action-save {
            background-color: #58BD00;
        }
        &.action-cancel {
            background-color: #EF534E;
        }
    }
}