JSFiddle - React, Tailwind, and code Playground

HTML

<div id='ribbon'>
	<ul id='topMenu'>
   
        <li>Thing one</li>
        <li>Thing two</li>
        <li>Thing three</li>
      
	</ul>
</div>

CSS

html, body {
	width: 100%; height: 100%;
	padding: 0; margin: 0; }

body {
	font-family: 'Segoe UI', 'Tahoma', sans-serif; }
	
#ribbon {
    background-color: #82E8FF;
    font-size: 12pt;
    line-height: 40px;
    padding: 0 0 5px 20px; }
	
a { text-decoration: none; }

#topMenu {
    height: 35px;
    margin: 0; padding: 0; }

#topMenu a { color: black; }
	
#topMenu li {
    padding: 0 10px 0 10px;
    float: left;
    list-style-type: none; }
	
#topMenu li:hover { color: white; background-color: #00D0FF; }