u-fit/frontend/components/logo.js

const Logo = () => (
  <div id='logo'>
    <div id='circle'>
      <span id='circle-text'>˙u</span>
    </div>
    <span>fit</span>

    <style jsx>{`
      #logo {
        position: relative;
        font-size: 40px;
        font-weight: 900;
      }

      #circle {
        background-color: red;
        color: white;
        width: 60px;
        height: 60px;
        border-radius: 30px;
      }

      span {
        position: absolute;
        bottom: 0.1em;
        left: 60px;
      }

      #circle-text {
        right: 0.1em;
        left: auto;
      }
    `}
    </style>
  </div>
)

export default Logo