JSFiddle - React, Tailwind, and code Playground

by Belle Jema Bantilan

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="https://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="https://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 class="col span_1_of_3">
        <img src="https://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 class="col span_1_of_3">
        <img src="https://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>
      <br>
      <div class="col span_1_of_3">
        <img src="https://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>
     ...

CSS

*{ box-sizing: border-box; }

.port-folio h2{ text-align: center; }
.portfolio-col {
    text-align: center;
    overflow: hidden; 
    padding: 5px;
    clear: both;
}
.port-folio ul{ list-style: none; padding: 0; margin: 25px 0 0; }
.port-folio ul li{ display: block; }
.col{
   width: 31.33%;
   border: 1px solid black; 
   float: left;
   padding: 5px;
   margin: 15px 1%;
}