Team UI Components – Shuffle Ux Library

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
      <span class="text-sm text-gray-200 uppercase">Lorem Ipsum</span>
      <h2 class="mt-2 mb-4 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>