JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top7">
<p class="six"><a href="#">CSC110</a></p>
<p class="six"><a href="#">MATH100</a></p>
<p class="six"><a href="#">HINF130</a></p>
<p class="six"><a href="#">CSC110</a></p>
<p class="six"><a href="#">HINF200</a></p>
    
</div>

CSS

#top7 {
    width: 150px;
    height:auto;
    margin: 5px;
    display: block;
    float: left;
word-wrap:break-word;
    border:1px solid red;

}

.six {
font-family: Myriad Pro;
margin: 1px;  
font-size: 22px;
background-color:#540f45;
padding: 5px 5px 3px 4px;
margin:4px;

}

a {
text-decoration: none;
color: white;
text-align: right;
font-family: Myriad Pro;

}