JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<header>
<nav style="{{navbarDisplay}}" class="top-nav">
			<div class="nav-wrapper">
				<div class="toggle-side-left left">
					<ul>
						<li><a href="#"><i class="material-icons top-nav">menu</i></a></li>
					</ul>
				</div>

				<ul id="nav-mobile" class="left">
					<li>
						<a href="#" class="nav-icons"><i class="material-icons" data-badge="4">info</i></a>
					</li>
				</ul>
			</div>
		</nav>
</header>

SCSS

body {
	display: flex;
	margin: 0;
	padding: 0;
	flex-direction: column;
	background: #fff;
	min-height: 100vh;
}

header {
	padding: 0;
	margin: 0;
	max-height: 60px;

	nav {
		height: 60px;

		.nav-wrapper {

			.toggle-side-left {
				i {
					line-height: 60px;
				}
			}

			#nav-mobile.left {
				max-height: 60px;
				li {
					line-height: 60px;

					.chip {
						background-color: transparent;
						color: #fff;
						font-weight: 600;
					}

					a.nav-icons {
						max-height: 60px !important;
						i.material-icons {

							font-size: 2rem;

							&[data-badge] {
								position: relative;
								&::after {
									content: attr(data-badge);
									position: absolute;
									background: red;
									border-radius: 100%;
									display: block;
									padding: 0.3em;
									color: black;
									font-size: 12px;
									max-height: 20px;
									max-width: auto;
									right: -10px;
									top: 8px;
                  font-family:verdana;
                  line-height:1.2;
								}
							}
						}
					}
				}
			}

			#dropdown-user {
				li {
					a {
						color: #000;
					}
				}
			}
		}
	}
}