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 .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 p {
    color: #fff;
    padding: 0 20px;
    line-height: 1.3;
    margin: 0;
}
      #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; }
        #team .team-item .team-descr .name:after {
          position: absolute;
          top: 3px;
          left: -4px;
          width: 8px;
          height: 8px;
          background: #ff493f;
          content: '';
          -webkit-border-radius: 50%;
                  border-radius: 50%; }
    
      
      #team .team-item .team-descr .social-icon {
        position: absolute;
        bottom: -11px;
        left: 14px;
        background: #2a52be;
        width: 36px; }
        #team .team-item .team-descr...