JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <div class="row">
        <div class="col span-1-of-3">
            <span class="icon-small">
                <i class="fa fa-television"></i>
                <h4>Web applications</h4>
                <h5>Mobile & Tablets Ready</h5>
            </span>
            <p>Powerful, fast and robust web applications to cater for complex business needs.</p>
        </div>
        <div class="col span-1-of-3">
            <span class="icon-small">
                <i class="fa fa-mobile-phone"></i>
                <h4>Mobile apps</h4>
                <h5>For the iPhone, iPad & Android</h5>
            </span>
            <p>Apps that connect directly to your customers.</p>
        </div> 
        <div class="col span-1-of-3">
            <span class="icon-small">
                <i class="fa fa-image"></i>
                <h4> Graphic </h4>
                <h5>Infographics, site designs and more</h5>
            </span>
            <p>Let our graphics speak the thousand words that you simply don't have the time to say.</p> 
        </div>
    </div>

CSS

.icon-small i {
  float: left;
  margin-right: 10px;
  height: 38px;
  width: 38px;
  color: #fff;
  background-color: #888;
  border-radius: 10%;
  text-align: center;
  vertical-align: middle;
  padding-top: 12px;
}

.icon-small + p {
  clear: left;
  margin-top: 15px;
}

.icon-small h4,
.icon-small h5 {
  text-align: left;
}