JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="our_team_members">

   <div class="marketer">
      <img src="images/marketer.png" alt="marketer"/>
     <h4>Kimberly Thompson</h4>
        <p>Marketer</p>
         <ul>
           <li><a href="#" target="_blank"><img src="images/white-twiitter.png"/></a> </li>
           <li><a href="#" target="_blank"><img src="images/white-fb.png"/></a> </li>
           <li><a href="#" target="_blank"><img src="images/white-pinterest.png"/> </a></li>
        </ul>
    </div>

    <div class="coder">
      <img src="images/coder.png" alt="coder"/>
      <h4>Rico Massimo</h4>
      <p>Coder</p>
        <ul>
            <li><a href="#" target="_blank"><img src="images/white-twitter.png"/> </a></li>
           <li><a href="#" target="_blank"><img src="images/white-fb.png"/> </a></li>
           <li><a href="#" target="_blank"><img src="images/white-google-plus.png"/></a> </li>
        </ul>
    </div>

    <div class="designer">
      <img src="images/designer.png" alt="designer"/>
      <h4>Uku Mason</h4>
      <p>Graphic Designer</p>
        <ul>

           <li><a href="#" target="_blank"><img src="images/white-fb.png"/></a> </li>
           <li><a href="#" target="_blank"><img src="images/white-pinterest.png"/> </a></li>
        </ul>
    </div>

  </div>

CSS

.our_team_members {
      width:100%;
      float:left;
      margin: 58px 0 90px;
      border:1px solid red;
  }
  .marketer, .coder, .designer {
      width:250px;
      border:1px solid black;
      text-align:center;
      float:left;
  }
  .marketer img, .coder img, .designer img {
      max-width:100%;
  }
  .marketer h4, .coder h4, .designer h4 {
      font-size:20px;
          
      
  }
  .marketer p, .coder p, .designer p {
      font-size:16px;
      color:#777777;
      
   }
  .marketer ul, .coder ul {
      width:150px;
      margin:8px auto;
      float:none;
      border:1px solid red;
  }
  .designer ul {
      width:100px;
      margin:8px auto;
      float:none;
      border:1px solid red;
  }
  .marketer ul li, .coder ul li, .designer ul li {
      list-style:none;
      float:left;
      text-align:center;
      margin: 0 4px;
  }