JSFiddle - React, Tailwind, and code Playground

by Haelle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<div class="container">
  <h1>
   OKI
  </h1>
  <div class="separator">
    <hr class="hyfen-court">
    <i class="icone fas fa-circle"></i>
  </div>
</div>

CSS

.hyfen-court {
  width: 10%;
}

h1 {
  text-align: center;
}

.separator {
  position: relative;
}

.icone {
  position: absolute;
  top: -9px;
  left: 50%;
}