JSFiddle - React, Tailwind, and code Playground

by davidliang2008

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<section class="calendar">
	<section class="month-selection">
		<a href="#">
			<i class="fas fa-arrow-left"></i>
		</a>
		<div class="month">DECEMBER</div>
		<a href="#">
			<i class="fas fa-arrow-right"></i>
		</a>
	</section>
	<section class="days-of-week">
		<div class="day-of-week">Sunday</div>
		<div class="day-of-week">Monday</div>
		<div class="day-of-week">Tuesday</div>
		<div class="day-of-week">Wednesday</div>
		<div class="day-of-week">Thursday</div>
		<div class="day-of-week">Friday</div>
		<div class="day-of-week">Saturday</div>
	</section>
	<section class="days">
		<div class="day">1</div>
		<div class="day">2</div>
		<div class="day">3</div>
		<div class="day">4</div>
		<div class="day">5</div>
		<div class="day">6</div>
		<div class="day">7</div>
		<div class="day">8</div>
		<div class="day">9</div>
		<div class="day">10</div>
		<div class="day">11</div>
		<div class="day">12</div>
		<div class="day">13</div>
		<div class="day">14</div>
		<div class="day">15</div>
		<div class="day">16</div>
		<div class="day">17</div>
		<div class="day">18</div>
		<div class="day">19</div>
		<div class="day">20</div>
		<div class="day">21</div>
		<div class="day">22</div>
		<div class="day">23</div>
		<div class="day">24</div>
		<div class="day">25</div>
		<div class="day">26</div>
		<div class="day">27</div>
		<div class="day">28</div>
		<div class="day">29</div>
		<div class="day">30</div>
		<div class="day">31</div>
	</section>
</section>

SCSS

$border-color: #dee2e6;

.calendar {
	display: flex;
	flex-flow: column nowrap;
	height: 100vh;

	.day-of-week,
	.day {
		padding: .75rem;
		width: calc(100% / 7);
	}

	.month-selection {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		font-size: 2rem;

		.month {
			padding: .75rem 2rem;
		}
	}

	.days-of-week {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		border-top: 2px solid $border-color;
		border-bottom: 2px solid $border-color;

		.day-of-week {
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;

			&:not(:last-child) {
				border-right: 1px solid $border-color;
			}
		}
	}

	.days {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: stretch;
		height: 100%;

		.day {
			border-bottom: 1px solid $border-color;

			&:not(:nth-child(7)) {
				border-right: 1px solid $border-color;
			}

			&:hover {
				cursor: pointer;
			}
		}
	}
}