JSFiddle - React, Tailwind, and code Playground

HTML

<div class="full-width">
        <h1>A Comprehensive Solution</h1>
        <div class="info-box">
          <div class="circle">
            <img src="http://www.assisianimalhealth.com/files/1014/1157/8860/eating-grass.jpg" alt="timer" />
            <h2>Real-Time</h2>
            <p>NUVI monitors 12 social networks and nearly 4 million RSS feeds in over 20 languages in Real Time.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
        <div class="info-box themiddleone">
          <div class="circle">
            <img src="https://pbs.twimg.com/profile_images/3240403733/57373b9103db06dafe8c1175d335cda9.png" alt="monitors" />
            <h2>Visualizations</h2>
            <p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
        <div class="info-box">
          <div class="circle">
            <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" alt="server" />
            <h2>Reporting</h2>
            <p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
    </div>

CSS

.info-box {
    display: inline-block;
    width: 29.5%;
    height: auto;
    border: 1px solid #FFF;
       padding: 100px;

}
.circle img {
    height: 70vh;
    margin-bottom: 20px;
    border-radius:50%;
    
}

@media screen and (max-width: 800px){
    .circle img{
       height: 40vh;   
    }
}