JSFiddle - React, Tailwind, and code Playground

HTML

<section class="port-folio" id="portfolio">
  <div class="container">
    <h2>MY PROJECTS</h2>
    <div class="portfolio-col">
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Rock</li>
          <li>Created By: Doe</li>
          <li>Date: June 2017</li>
          <li>Language: Java</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>

      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Player</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Java</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>

      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS

/* general styles */

body {
  margin: 0;
}
h2 {
  text-align: center;
  text-decoration: overline underline;
  text-decoration-color: #fff;
}
.col li {
  list-style-type: none;
}
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
  /* these styles are called a clearfix (look it up) */
}


/* grid layout with flexbox */
.portfolio-col {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.col {
  margin: 1% 3.3%;
  /* equally space our boxes, instead of different left and right margins; specific numbers you can adjust */
  flex-shrink: 0;
  box-sizing: border-box;
}
.col ul {
  padding-left: 0;
  text-align: center;
  width: 100%;
  max-width: 250px;
  /* same width and max-width as our images */
}
.col img {
  border-style: solid;
  border-color: blue;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}