JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav>
      <h1 class="page-title">
        <a href="index.html">
               <img src="leafsnap_logo.png" style="width:197px;height:71px;border:0;">
               </a>
      </h1>
      <ul>
        <li><a class="active" href="../species.html">Species</a></li>
        <li><a class="active" href="../support.html">Support</a></li>
        <li><a href="https://itunes.apple.com/us/app/leafsnap/id430649829?mt=8">Download</a></li>
      </ul>
    </nav>
    <section class="content-wrapper history">
      <div class="title">
        <h2>About Us</h2>
      </div>
      <input id="ch" type="checkbox">
      <div class="headline">
        <p>Columbia University, the University of Maryland, and the Smithsonian Institution are working on visual recognition software to help identify species from photographs.</p>
      </div>
      <div class="text">
        <p>The genesis of Leafsnap was the realization that many techniques used for face recognition developed by Professor <a href="http://www.cs.columbia.edu/~belhumeur/" target="_blank">Peter Belhumeur</a> and Professor <a href="http://www.cs.umd.edu/~djacobs/"
            target="_blank">David Jacobs</a>, of the Computer Science departments of Columbia University and the University of Maryland, respectively, could be applied to automatic species identification.</p>

        <p>Professors Jacobs and Belhumeur approached <a href="http://botany.si.edu/staff/staffPage.cfm?ThisName=2&amp;homepage=no" target="_blank">Dr. John Kress</a>, Research Botanist and Curator at the Smithsonian to start a collaborative effort for designing
          and building such a system for plant species. Columbia University and the University of Maryland designed and implemented the visual recognition system used for automatic identification. In addition, Columbia University designed and wrote the
          iPhone, and iPad apps, the leafsnap.com website, and wrote the code that powers the recognition servers. The Smithsonian was...

CSS

body {
  height: 100%;
  margin: 0;
  width: 100%;
  font-family: "Avenir Next";
  font-size: 18px;
  text-align: justify;
  text-justify: auto;
}

* {
  margin: 0;
  padding: 0;
}

section.history {
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: auto;
  color: #232323;
  display: inline-block;
  text-align: center;
  width: 100%;
  background: #FBFBFB;
}

section.history h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}

.headline {
  display: inline-block;
  width: 60%;
  margin-bottom: 10px;
  font-style: normal;
  line-height: normal;
  font: helvetica neue;
}

.text {
  height: 0px;
  width: 80%;
  overflow: hidden;
  margin: auto;
  margin-bottom: 20px;
  display: block;
  text-align: justify;
  column-count: 2;
  column-gap: 5%;
}

.text a {
  color: #000;
}

.container {
  position: relative;
}

label {
  font-weight: 550;
}

input {
  display: none;
}

label {
  font-weight: 550;
  display: block;
}

input {
  display: none;
}

label:after {
  content: "Show More";
}

.text {
  margin-top: 10px;
  text-indent: 40px;
}

input:checked+label:after {
  content: "Show Less";
}

input:checked~div {
  height: 100%;
}

.team-listing {
  position: relative;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
}

.team-listing ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  flex-flow: row wrap;
  flex-shrink: 1;
  flex-grow: 1;
  float: left;
  min-width: 0;
  max-width: 100%;
  position: relative;
  filter: drop-shadow(5px 5px 5px rgba(2, 2, 22, 0.1));
}

.team-listing li {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  float: left;
  height: 340px;
  list-style-position: inside;
  margin: 1px 1px 1px 1px;
  background-color: #fff;
}

a {
  display: inline-block;
}

article {
  position: relative;
  width: 300px;
  height: 340px;
  overflow: hidden;
}

article:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
 ...