JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">

<div class="logo">
  <div class="line">prepared</div><div class="line"><span>.</span>fyi</div>
</div>

CSS

body {
  font-family: 'Rubik', sans-serif;
}
.logo {
  font-size: 3rem;
  margin: 30px;
  padding: 3px 7px 6px;
  /* border: 5px solid;
  border-radius: 8px; */
  background-color: black;
  color: white;
  display: inline-flex;
  /* letter-spacing: 0.5px; */
  font-weight: bold;
}
.logo .line {
  display: inline;
}
.logo span {
  margin: 0 2px;
}