JSFiddle - React, Tailwind, and code Playground

by hendrikdegraaf

HTML

<div class="one">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
  >
    <path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" />
  </svg>
  Some help text here
</div>
<div class="two">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
  >
    <path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" />
  </svg>
  Some help text here
</div>
<div class="three">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
  >
    <path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" />
  </svg>
  Some help text here
</div>
<div class="four">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
  >
    <path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" />
  </svg>
  Some help text here
</div>
<div class="five">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
  >
    <path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" />
  </svg>
  Some help text here
</div>
<div class="five">
  Some help text here
</div>

CSS

div {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}

svg {
  height: 1.5em;
  width: 1.5em;
  margin-right: 0.25em;
  vertical-align: middle;
  pointer-events: none;
  fill: green;
}

.one {
  font-size: 12px;
}

.two {
 font-size: 16px; 
}

.three {
 font-size: 20px; 
}

.four {
 font-size: 24px; 
}

.five {
 font-size: 30px; 
 line-height: 1.5em;
}