Teams

<div class="bg-blueGray-300">
    <div class="py-12">
       <div class="mb-12 flex flex-wrap -mx-4 justify-center">
          <div class="px-4 relative w-full lg:w-8/12 text-center">
             <span class="text-blueGray-500 bg-blueGray-100 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Endless story</span>
             <h3 class="text-3xl font-bold mt-3 mb-1 text-white">Everything started in this neighborhood</h3>
             <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">We've got the same blood in our veins, and we'll be brothers until death will tear us apart, and this is cause nobody could ever separate us.</p>
          </div>
       </div>
       <div class="flex flex-wrap -mx-4">
          <div class="px-4 relative w-full lg:w-4/12 w-full md:w-6/12">
             <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
                <div class="relative">
                   <img alt="..." class="w-full flex-shrink-0 rounded-t-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-6.c98b9ea7.jpg">
                   <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="block w-full absolute text-white svg-bg" style="height: 95px; bottom: 0px;">
                      <polygon points="583,55 583,95 0,95" style="fill: currentcolor;"></polygon>
                   </svg>
                </div>
                <div class="px-4 py-5 flex-auto">
                   <h3 class="text-2xl font-bold">Sofie Allure</h3>
                   <p class="text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase">Managing Partner</p>
                   <div class="block w-full" style="overflow-x: auto;">
                      <ul class="list-none">
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-lightBlue-500 bg-lightBlue-200"><i class="fab fa-facebook"></i></span>
                               <h6 class="text-md text-blueGray-500">At Facebook since 2016</h6>
                            </div>
                         </li>
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200"><i class="fas fa-running"></i></span>
                               <h6 class="text-md text-blueGray-500">Outdors lover</h6>
                            </div>
                         </li>
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200"><i class="fas fa-headset"></i></span>
                               <h6 class="text-md text-blueGray-500">Super friendly support team</h6>
                            </div>
                         </li>
                      </ul>
                   </div>
                </div>
             </div>
          </div>
          <div class="px-4 relative w-full lg:w-4/12 w-full md:w-6/12">
             <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
                <div class="relative">
                   <img alt="..." class="w-full flex-shrink-0 rounded-t-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-5.22135691.jpg">
                   <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="block w-full absolute text-white svg-bg" style="height: 95px; bottom: 0px;">
                      <polygon points="583,55 583,95 0,95" style="fill: currentcolor;"></polygon>
                   </svg>
                </div>
                <div class="px-4 py-5 flex-auto">
                   <h3 class="text-2xl font-bold">Dylan Wyatt</h3>
                   <p class="text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase">Team Lead</p>
                   <div class="block w-full" style="overflow-x: auto;">
                      <ul class="list-none">
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-teal-500 bg-teal-200"><i class="fas fa-atom"></i></span>
                               <h6 class="text-md text-blueGray-500">Dedicated entrepreneur</h6>
                            </div>
                         </li>
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200"><i class="fas fa-running"></i></span>
                               <h6 class="text-md text-blueGray-500">Urban exploration</h6>
                            </div>
                         </li>
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200"><i class="fas fa-chart-bar"></i></span>
                               <h6 class="text-md text-blueGray-500">Able to get good at everything</h6>
                            </div>
                         </li>
                      </ul>
                   </div>
                </div>
             </div>
          </div>
          <div class="px-4 relative w-full lg:w-4/12 w-full md:w-6/12">
             <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
                <div class="relative">
                   <img alt="..." class="w-full flex-shrink-0 rounded-t-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/atikh.55c7b772.jpg">
                   <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="block w-full absolute text-white svg-bg" style="height: 95px; bottom: 0px;">
                      <polygon points="583,55 583,95 0,95" style="fill: currentcolor;"></polygon>
                   </svg>
                </div>
                <div class="px-4 py-5 flex-auto">
                   <h3 class="text-2xl font-bold">Mila Skylar</h3>
                   <p class="text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase">Content Creator</p>
                   <div class="block w-full" style="overflow-x: auto;">
                      <ul class="list-none">
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-teal-500 bg-teal-200"><i class="fas fa-atom"></i></span>
                               <h6 class="text-md text-blueGray-500">High quality publication</h6>
                            </div>
                         </li>
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200"><i class="fas fa-running"></i></span>
                               <h6 class="text-md text-blueGray-500">Storytelling</h6>
                            </div>
                         </li>
                         <li class="py-1">
                            <div class="flex items-center">
                               <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200"><i class="fas fa-chart-bar"></i></span>
                               <h6 class="text-md text-blueGray-500">Master of words qualification</h6>
                            </div>
                         </li>
                      </ul>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>