Teams 15

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
  <div class="max-w-screen-lg mx-auto">
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-x-8 xl:gap-12">

      <!-- card -->
      <div class="border border-gray-300 p-8 space-y-6">
        <img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="mx-auto rounded-md">
        <div class="space-y-1">
          <span class="text-xl font-semibold text-gray-700 block">Ellen Garza</span>
          <span class="text-base font-semibold text-gray-500 block">CEO</span>
        </div>
        <div class="flex-1">
          <span class="font-semibold block text-base md:text-lg mb-2 text-left">Leadership</span>
          <div class="bg-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-300 w-full text-center text-sm p-1 font-semibold">
              100%
            </div>
          </div>
        </div>
        <div class="flex-1">
          <span class="font-semibold block text-base md:text-lg mb-2 text-left">Communication</span>
          <div class="bg-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-300 w-2/4 text-center text-sm p-1 font-semibold">
              50%
            </div>
          </div>
        </div>
      </div>
      <!--/ card -->

      <!-- card -->
      <div class="border border-gray-300 p-8 space-y-6">
        <img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="mx-auto rounded-md">
        <div class="space-y-1">
          <span class="text-xl font-semibold text-gray-700 block">Jennie Peck</span>
          <span class="text-base font-semibold text-gray-500 block">Marketing</span>
        </div>
        <div class="flex-1">
          <span class="font-semibold block text-base md:text-lg mb-2 text-left">Adwords</span>
          <div class="bg-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-300 w-3/4 text-center text-sm p-1 font-semibold">
              80%
            </div>
          </div>
        </div>
        <div class="flex-1">
          <span class="font-semibold block text-base md:text-lg mb-2 text-left">Facebook ads</span>
          <div class="bg-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-300 w-1/4 text-center text-sm p-1 font-semibold">
              25%
            </div>
          </div>
        </div>
      </div>
      <!--/ card -->

      <!-- card -->
      <div class="border border-gray-300 p-8 space-y-6">
        <img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="mx-auto rounded-md">
        <div class="space-y-1">
          <span class="text-xl font-semibold text-gray-700 block">Jamie Ramos</span>
          <span class="text-base font-semibold text-gray-500 block">Intern</span>
        </div>
        <div class="flex-1">
          <span class="font-semibold block text-base md:text-lg mb-2 text-left">jQuery</span>
          <div class="bg-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-300 w-4/5 text-center text-sm p-1 font-semibold">
              90%
            </div>
          </div>
        </div>
        <div class="flex-1">
          <span class="font-semibold block text-base md:text-lg mb-2 text-left">Ruby on Rails</span>
          <div class="bg-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-300 w-3/5 text-center text-sm p-1 font-semibold">
              650%
            </div>
          </div>
        </div>
      </div>
      <!--/ card -->
      
    </div>
  </div>
</div>