JSFiddle - React, Tailwind, and code Playground

research infographic

by Danielle Parkinson

HTML

<div class="infographic-circle">
  <div id="infographic-inner-circle">
    <h1>
      Customer Insight Ecosystem
    </h1>
  </div>
</div>

CSS

.infographic-circle {
  width: 380px;
  height: 380px;
  border-radius: 100%;
  border: 10px solid #0091da;
  margin: 50% 33%;
}

#infographic-inner-circle {
  background-color: #201f2d;
  width: 370px;
  height: 370px;
  border-radius: 100%;
  border: 5px solid #fff;
}
  #infographic-inner-circle h1 {
    margin: 40% auto;
    font-size: 22px;
    text-align: center;
    color: #0091da;
    font-family: Quicksand Light;
    text-transform: uppercase;
    letter-spacing: 0.8em;
  }