JSFiddle - React, Tailwind, and code Playground

HTML

<section class="port-folio" id="portfolio">
  <div class="container">
    <div class="portfolio-col">
      <h2>MY PROJECTS</h2>
      <div class="row group">
        <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>
  </div>
</section>

CSS

/* general styles */
body {
  margin: 0;
}
.container {
  width: 100%;
}
.portfolio-col {
  text-align: center;
  width: 80%;
  margin: 0 auto; /* center the container for the rows */
}
.portfolio-col h2 {
  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) */
}

/* each row */
.row {
  clear: both;
  padding: 0px;
}
.col {
  display: block;
  float: left;
  margin: 1% 3.3%; /* equally space our boxes; specific numbers you can adjust */
  box-sizing: border-box;
}
.col ul {
  padding-left: 0;
  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;
}

@media all and (max-width: 740px) { /* slightly before our images would collase to one-column */
  .portfolio-col {
    max-width: 250px; /* by setting this, we'll make sure the images stay centered */
  }
}