JSFiddle - React, Tailwind, and code Playground

by mzechar

HTML

<section class="content-wrapper team">
      <h3>Columbia</h3>
      <div class="team-listing">
        <ul>
               <section class="content-wrapper team">
      <h3>Columbia</h3>
      <div class="team-listing">
        <ul>
          <li>
            <div class="team-member-listing-wrapper">
              <div class="circle-image-crop">
                <img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
              </div>
              Jane Jam
              <br>
              <span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
            </div>
          </li>
          <li>
            <div class="team-member-listing-wrapper">
              <div class="circle-image-crop">
                <img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
              </div>
              Jane Jam
              <br>
              <span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
            </div>
          </li>
          <li>
            <div class="team-member-listing-wrapper">
              <div class="circle-image-crop">
                <img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
              </div>
              Jane Jam
              <br>
              <span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
            </div>
          </li>
          <li>
            <div class="team-member-listing-wrapper">
              <div class="circle-image-crop">
                <img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
 ...

CSS

section.team{
        margin: auto;
        background: #FEFEFE;
        display:inline-block;
    }
    
    .team-listing{
        position:relative;
        margin-top:40px;
        margin-right:auto;
        margin-left:auto;
    }
    
    .team-listing li{
        display:inline-block;
        width: 300px;
        overflow: hidden;
        float:left;
        height: 340px;
        list-style-position:inside;
        margin: 1px 1px 1px 1px;
        background-color:#fff;
    }

    .team-listing ul{
        display:table;
        list-style: none;
        filter: drop-shadow(5px 5px 5px rgba(2,2,22,0.1));
        white-space: nowrap;
        width:80%;
        margin:auto;
    }
    
    .circle-image-crop{
       background-color:transparent;
        width: 220px;
        height: 220px;
        position: relative;
        display:block;
        overflow: hidden;
        border-radius: 50%;
        margin-left:auto;
        margin-right:auto;
        margin-top:20px;
    }
    
    .circle-image-crop::after{
            position:absolute;
            height: 100%;
            width:100%;
            top:0;
            left:0;
            display:none;
            content: ' ';
            background: -moz-radial-gradient(center, ellipse cover, rgba(190,232,114,0.15) 0%, rgba(66,147,33,1) 100%); /* ff3.6+ */
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(190,232,114,0.15)), color-stop(100%, rgba(66,147,33,1))); /* safari4+,chrome */
            background:-webkit-radial-gradient(center, ellipse cover, rgba(190,232,114,0.15) 0%, rgba(66,147,33,1) 100%); /* safari5.1+,chrome10+ */
            background: -o-radial-gradient(center, ellipse cover, rgba(190,232,114,0.15) 0%, rgba(66,147,33,1) 100%); /* opera 11.10+ */
            background: -ms-radial-gradient(center, ellipse cover, rgba(190,232,114,0.15) 0%, rgba(66,147,33,1) 100%); /* ie10+ */
            background:radial-gradient(ellipse at...