JSFiddle - React, Tailwind, and code Playground

by rmkk

HTML

<section id="team">
      <div class="container">
        <div class="row team-row">
          <div class="col-md-10 col-md-offset-1">
            <div class="team-item">
              <div class="team-photo"><img src="img/team-3.jpg" alt="IMAGE"></div>
              <fieldset class="team-descr">
                <legend class="name">Name Surname</legend>
                <p>Advisor</p>
                <p>New York City</p>
                <div class="social-icon"><a href="#">in</a></div>
              </fieldset>
            </div> 
          </div>
        </div>
      </div>
    </section>

CSS

#team {
  padding: 75px 0 160px;
  background: #2a52be;
  background-size: cover;
  position: relative;
  z-index: 2;
  -webkit-box-shadow: rgba(0, 25, 74, 0.5) 0px 7px 15px 0px;
          box-shadow: rgba(0, 25, 74, 0.5) 0px 7px 15px 0px; }
  #team:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/team-bg-2.png) no-repeat bottom center;
    content: ''; }
  #team .section-title h2 {
    font-size: 21px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0 0 110px;
    position: relative;
    text-align: center; }
    #team .section-title h2:before {
      position: absolute;
      bottom: -5px;
      left: 50%;
      margin-left: -10px;
      width: 20px;
      height: 2px;
      background: #ff493f;
      content: ''; }
    #team .section-title h2 span {
      display: block; }
  #team .team-row {
    text-align: center; }
  #team .team-item {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 0 15px 80px; }
    #team .team-item .team-photo {
      margin-bottom: 17px; }
      #team .team-item .team-photo img {
        -webkit-border-radius: 4px;
                border-radius: 4px; }
    #team .team-item .team-descr {
      width: 270px;
      -webkit-border-radius: 4px;
              border-radius: 4px;
      border: solid 1px #dddddd;
      padding: 20px 0 10px;
      position: relative;
      max-width: 270px;
      height: 130px; }
      #team .team-item .team-descr:before {
        position: absolute;
        top: 21px;
        left: 20px;
        width: 17px;
        height: 2px;
        background: #fff;
        content: ''; }
      #team .team-item .team-descr .name {
        display: inline-block;
        width: auto;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        color: #ffffff;
        padding: 0 20px;
        position: relative;
        border: none;
        margin-bottom: 0; }
  ...