JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="bdy">
  <div class="canv">
    <div class="circle inline"></div>
    <div class="name inline">Kirubel Girma</div>
  </div>
</div>

CSS

* {
  font-family: arial;
  margin: 0em;
}

.bdy {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: aqua;
}

.canv {
  background: grey;
  position: relative;
  float: left;
}

.circle {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background-color: black;
  virtically-allign:center;
        }

.name {
  margin-left: .6em;
}

.inline {
  display: inline-block;
}