JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <!-- Here's Where the Expanded View Is Displayed -->
  <div class="projectDisplay"></div>
  
  <!-- Here's the project list with all expanded and simplified HTML -->
  <div class="flex-grid project-list">

    <!-- Project 1 -->
    <div id="project1" class="project">
      <div class="projectImg">
          <img src="http://adbakke.com/archive/images/project.jpg" alt="">
      </div>
      <div class="projectDesc">
        <h3>Project Title</h3>
        <p>A bunch of text that talks all about this project and how awesome it is et cetera et cetera on and on.</p>
        <a href="#"><span>Go To Live Project</span></a>
        <span class="closeMe">Close Project</span>
      </div>
    </div>
    
    <!-- Project 2 -->
    <div id="project2" class="project">
      <div class="projectImg">
          <img src="http://adbakke.com/archive/images/project.jpg" alt="">
      </div>
      <div class="projectDesc">
        <h3>Project Title</h3>
        <p>A bunch of text that talks all about this project and how awesome it is et cetera et cetera on and on.</p>
        <a href="#"><span>Go To Live Project</span></a>
        <span class="closeMe">Close Project</span>
      </div>
    </div>
    
    <!-- Project 3 -->
    <div id="project3" class="project">
      <div class="projectImg">
          <img src="http://adbakke.com/archive/images/project.jpg" alt="">
      </div>
      <div class="projectDesc">
        <h3>Project Title</h3>
        <p>A bunch of text that talks all about this project and how awesome it is et cetera et cetera on and on.</p>
        <a href="#"><span>Go To Live Project</span></a>
        <span class="closeMe">Close Project</span>
      </div>
    </div>
    
    <!-- Project 4 -->
    <div id="project4" class="project">
      <div class="projectImg">
          <img src="http://adbakke.com/archive/images/project.jpg" alt="">
      </div>
      <div class="projectDesc">
        <h3>Project Title</h3>
        <p>A bunch of text that talks...

CSS

body {background-color: rgb(105,132,148);}
img {width: 100%;}

.flex-grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: space-around;
}

.projectDisplay {
  margin:0 auto;
  width: 75%
}

.projectDisplay .projectImg {
  display:inline-block;
  margin-right:1em;
  max-width:300px;
  width:60%
}

.projectDesc {
  display:inline-block;
  position:relative;
  top:0;
  vertical-align:top;
}
.projectDisplay .projectDesc {
  width:35%;
}

.projectDesc h3 {
  margin-bottom:0.7em;
  font-size:1em;
}


.projectDesc p {
  font-size: 1em;
  line-height:1.5;
  margin-bottom:.5em;
}

.projectDesc span {
  background-color: rgba(75,102,119,1);
  border-radius:2px;
  box-shadow: 2px 4px rgb(65,92,109);
  display:block;
  padding:0.5em;
  position: relative;
  color:rgb(250,250,255);
  display:inline-block;
  margin:.5em;
}

.projectDesc span:hover {
  box-shadow: 1px 2px rgb(65,92,109);
  cursor:pointer;
  top:1px;
}

.projectDesc span:active {
  box-shadow: 0 0px rgb(62,92,109);
  top:2px;
}

.project {
  margin: 1em;
  max-width:300px;
}

JavaScript

$(document).ready( function () {
// Hide the Description, Close Button and Link to Site
  $('.projectDesc a, .projectDesc p, .projectDesc span').hide();

// What happens when you click the project button
  $('.project').click(
    function() {
      var newGet = $(this).html();

      if ($('.projectDisplay').is(':empty')) {
      // Add the description section if empty
        $(newGet).hide().appendTo('.projectDisplay').fadeIn(500);
        $('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
      } else {
      // If description is not empty, fade out, empty and add new project description
        $('.projectDisplay').fadeOut(500, function (){
          $('.projectDisplay').empty().append(newGet).fadeIn(250);
          $('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
        })
      };

      $('html, body').animate({
          // scrollTop: $(".projectDisplay").position().top
          scrollTop: $(".projectDisplay").offset().top - 200
      }, 750);

      $(document).on('click', '.closeMe',
        function() {
          $('.projectDisplay').fadeOut(500);
        }
      );


    });
});
// End of Project Click Function