JSFiddle - React, Tailwind, and code Playground

HTML

<div class="team">
  <ul class="thumbnails">
    <li class="profile">
      <div class="thumbnail">
        <a href="#"><img alt="" src="http://placehold.it/240x180/EEEEEE"></a>

        <div class="caption">
          <h3 class="section-content-title">John Doe</h3>

          <p class="meta">Graphic Designer</p>

          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos pulvinar tristique fermentum.</p>

          <ul class="social social-inline">
            <li>
              <a href="https://facebook.com/Doe"><em class="icon-facebook-2"></em></a>
            </li>

            <li>
              <a href="https://twitter.com/Doe"><em class="icon-twitter-2"></em></a>
            </li>

            <li>
              <a href="http://www.flickr.com/photos/Doe/"><em class="icon-flickr-2"></em></a>
            </li>
          </ul>
        </div>
      </div>
    </li>

    <li class="profile">
      <div class="thumbnail">
        <a href="#"><img alt="" src="http://placehold.it/240x180/EEEEEE"></a>

        <div class="caption">
          <h3 class="section-content-title">Jonnathan Orgen</h3>

          <p class="meta">Video Specialist</p>

          <p>Donec at odio augue. Nullam nisl tortor; cursus ac fermentum ac, fringilla et justo. Curabitur porta, justo ut pulvinar tristique.</p>

          <ul class="social social-inline">
            <li>
              <a href="https://facebook.com/orgen"><em class="icon-facebook-2"></em></a>
            </li>

            <li>
              <a href="https://twitter.com/orgen"><em class="icon-twitter-2"></em></a>
            </li>

            <li>
              <a href="http://www.flickr.com/photos/orgen/"><em class="icon-flickr-2"></em></a>
            </li>
          </ul>
        </div>
      </div>
    </li>

    <li class="profile">
      <div class="thumbnail">
        <a href="#"><img alt="" src="http://placehold.it/240x180/EEEEEE"></a>

        <div class="caption">
 ...

CSS

.team .thumbnails {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}

.team .thumbnails .profile {
  list-style-type: none;
  flex: 1;
  margin: 0 15px;
  background: #efefef;
  border: 1px solid #d8d8d8;
  overflow: hidden;
}

.team .thumbnails .profile a {
  display: block;
  overflow: hidden;
}

.team .thumbnails .profile img {
  width: 100%;
  height: 300px;
  display: block;
  transition: 0.6s ease;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  background-size: cover;
}

.team .thumbnails .profile:hover a img {
  display: block;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.team .thumbnails .profile .caption {
  padding: 10px;
}

.team .thumbnails .profile .caption h3 {
  margin: 10px 0 5px 0;
  text-transform: capitalize;
}

.team .thumbnails .profile .caption h3 a {
  color: #53a7ea;
  text-decoration: none;
}

.team .thumbnails .profile .caption h3 a:hover,
.team .thumbnails .profile .caption h3 a:active,
.team .thumbnails .profile .caption h3 a:focus {
  text-decoration: underline;
}

.team .thumbnails .profile .caption .meta {
  margin: 0 0 15px 0;
  text-transform: capitalize;
  color: #484848;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2em;
}

.team .thumbnails .social-inline {
  padding: 0;
  background: #000;
  margin-top: auto;
}

.team .social-inline li {
  display: inline-block;
  list-style-type: none;
}

.team .social-inline li a {
  color: #000;
  text-decoration: none;
  padding: 5px;
  font-size: 20px;
}

.team .social-inline li a em {
  transition: 0.6s ease;
}

.team .social-inline li:first-of-type a {
  padding-left: 0;
}

.profile,
.thumbnail,
.caption {
  display: flex;
  flex: 1;
  flex-direction: column;
}