JSFiddle - React, Tailwind, and code Playground

HTML

<div class="our-team">
    
    <div class="center-align content cf">
            <div class="col-3">
                <div class="circle">
                    <img src="http://aletheme.com/html/cafeteria/css/images/our-team/1.jpg" alt="" class="fadeIn">
                </div>
                <h2 class="caption">Minodora Oreiro</h2>
                <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt suscipit
                </p>
            </div>
            <div class="col-3">
                <div class="circle">
                    <img src="http://aletheme.com/html/cafeteria/css/images/our-team/2.jpg" alt="" class="fadeIn">
                </div>
                <h2 class="caption">Olivia Wilder</h2>
                <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt suscipit
                </p>
            </div>
            <div class="col-3">
                <div class="circle">
                    <img src="http://aletheme.com/html/cafeteria/css/images/our-team/3.jpg" alt="" class="fadeIn">
                </div>
                <h2 class="caption">Melissa Morgan</h2>
                <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt suscipit
                </p>
            </div>
            <div class="col-3">
                <div class="circle">
                    <img src="http://aletheme.com/html/cafeteria/css/images/our-team/4.jpg" alt="" class="fadeIn">
                </div>
                <h2 class="caption">Andreea Marino</h2>
                <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt suscipit
                </p>
            </div>
        </div>
                </div>

CSS

/* Home Our-Team
/* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## */
.our-team .content {
  margin-top: 80px;
}
.our-team .content .col-3 {
  position: relative;
}
.our-team .content .circle {
  position: relative;
  margin: 0 auto;
  width: 192px;
  height: 192px;
  background: #fff;
  -webkit-border-top-right-radius: 50%;
  -webkit-border-bottom-right-radius: 50%;
  -webkit-border-bottom-left-radius: 50%;
  -webkit-border-top-left-radius: 50%;
  -moz-border-radius-topright: 50%;
  -moz-border-radius-bottomright: 50%;
  -moz-border-radius-bottomleft: 50%;
  -moz-border-radius-topleft: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 9px 15px rgba(255, 216, 128, 0.6);
  -moz-box-shadow: 0 9px 15px rgba(255, 216, 128, 0.6);
  box-shadow: 0 9px 15px rgba(255, 216, 128, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.our-team .content .circle:hover {
  -webkit-box-shadow: 0 30px 30px rgba(255, 216, 128, 0.6);
  -moz-box-shadow: 0 30px 30px rgba(255, 216, 128, 0.6);
  box-shadow: 0 30px 30px rgba(255, 216, 128, 0.6);
}
.our-team .content .circle img {
 
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  -webkit-border-top-right-radius: 50%;
  -webkit-border-bottom-right-radius: 50%;
  -webkit-border-bottom-left-radius: 50%;
  -webkit-border-top-left-radius: 50%;
  -moz-border-radius-topright: 50%;
  -moz-border-radius-bottomright: 50%;
  -moz-border-radius-bottomleft: 50%;
  -moz-border-radius-topleft: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  -moz-background-clip: padding;
 ...