JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<h1>
  
  NAVIGATION — SYNC<span class="registered">®</span> <span class="num">3</span>
  
  
</h1>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway:400,900&display=swap');

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  
}

h1 {
  font-family: 'Raleway';
  margin-bottom: 0;
  border-bottom: 0.5px solid #ccc;
  line-height: 30px;
  font-size: 40px;
}

.registered {
  display: inline-block;
  vertical-align: top;
  font-size: 70%;
  transform: translateY(-50%);
}

.num {
  vertical-align: baseline;
  display: inline-block;
}