JSFiddle - React, Tailwind, and code Playground

by davidliang2008

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="container mt-3">
	<div class="btn-matrix btn-matrix-white" role="group">
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-chart-bar fa-stack-1x"></i>
			</div>
			Reports
		</a>
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-dollar-sign fa-stack-1x"></i>
			</div>
			Commission Statements
		</a>
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-envelope fa-stack-1x"></i>
			</div>
			My Careletter
		</a>
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-check-square fa-stack-1x"></i>
			</div>
			My Enroller
		</a>
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-file-alt fa-stack-1x"></i>
			</div>
			My EasyClaim
		</a>
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-shopping-cart fa-stack-1x"></i>
			</div>
			Order Supplies
		</a>
		<a class="btn" href="#">
			<div class="fa-stack fa-2x">
				<i class="fas fa-circle fa-stack-2x"></i>
				<i class="fas fa-star fa-stack-1x"></i>
			</div>
			My Favorites
		</a>
	</div>
</div>

SCSS

$numOfMatrixItemPerRow: 3;
$matrixItemBorderWidth: 1px;

.btn-matrix {
	display: flex;
	flex-flow: row wrap;
	box-shadow: 0 0 1rem #ccc;
	border: 1px solid transparent;
	border-radius: .25rem;
	
	> .btn {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: flex-start;
		flex-grow: 0;
		flex-shrink: 0;
		padding: 5%;
		width: calc(100% / #{$numOfMatrixItemPerRow});
		border-radius: 0;
	}

	&.btn-matrix-white {
		> .btn {
			background-color: #fff;
			border-right: $matrixItemBorderWidth solid #ddd;
			border-bottom: $matrixItemBorderWidth solid #ddd;
			
			.fa-stack-2x {
				color: var(--primary);
			}
			
			.fa-stack-1x {
				color: #fff;
			}
			
			&:nth-child(#{$numOfMatrixItemPerRow}n) {
				border-right: none !important;
			}
			
			&:last-child {
				border-bottom: none !important;
			}
		}
	}
}