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...

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;
}