JSFiddle - React, Tailwind, and code Playground

Circle Text Center

by Hugo Carneiro

HTML

<!-- CIRCLES -->
<div class="container">
  <div class="col-md-4">
    <div class="circle-container">Starter</div>
  </div>
  <div class="col-md-4">
    <div class="circle-container">Growing</div>
  </div>
  <div class="col-md-4">
    <div class="circle-container">Enterprise</div>
  </div>
</div>

<!-- TWO COLOUR RECTANGLES -->
<div class="container">
  <div class="col-md-4">
    <div class="rect-container">Starter</div>
  </div>
  <div class="col-md-4">
    <div class="rect-container">Growing</div>
  </div>
  <div class="col-md-4">
    <div class="rect-container">Enterprise</div>
  </div>
</div>

CSS

.container {
  margin-bottom: 40px;
}

.circle-container {
  width: 150px;
  height: 150px;
  border: 2px solid blue;
  border-radius: 50%;
  line-height: 150px;
  text-align: center;
  margin: 0 auto;
}

.rect-container {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  color: #FFF;
  padding: 40px 0;
  background: linear-gradient(to right, #03A9F4 0%,#03A9F4 50%,#03A9F4 50%,#2196F3 50%,#2196F3 100%);
}