JSFiddle - React, Tailwind, and code Playground

HTML

<div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

CSS

#subject-bar-container {
	background-color: #2c2c2c !important;
	border-top: 1px solid white;
	width: 100%
}

#subject-bar {
	width: 12em;
	height: 5em;
	color: white;
	font-weight: lighter;
	background-color: blue;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .2s ease-in-out;
	margin: 5px;
}

#subject-bar:hover {
	transform: scale(1.02);
}

a:hover {
	text-decoration: none !important;
}

.math {
	background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
	background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
	background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
	background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
	background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
	background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}


.row ul * {
  display:flex;
  overflow: hidden;
}

ul{
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
}