TailwindCSS - Minimalistic Testimonial

testimonial.js

export const Testimonial = () => (
  <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
    <div>
      <img
        className="mx-auto h-12 w-12 object-cover rounded-full"
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
        alt="John"
      />
      <div className="pt-2 pb-4 px-4 -mt-6 flex flex-col justify-between bg-gray-50 rounded-md space-y-2">
        <div className="mt-6 space-y-2 text-center">
          <span className="block text-xl text-gray-900 font-medium leading-5">John Schmidt</span>
          <span className="block text-gray-900">CEO, Space</span>
        </div>
        <div>
          <p className="text-gray-500">
            Irure qui voluptate aute quis non ipsum. Laborum aliqua commodo eu et eiusmod laboris quis culpa ipsum
            veniam.
          </p>
        </div>
      </div>
    </div>
    <div>
      <img
        className="mx-auto h-12 w-12 object-cover rounded-full"
        src="https://images.unsplash.com/photo-1519895609939-d2a6491c1196?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
        alt="Sarah"
      />
      <div className="pt-2 pb-4 px-4 -mt-6 flex flex-col justify-between bg-gray-50 rounded-md space-y-2">
        <div className="mt-6 space-y-2 text-center">
          <span className="block text-xl text-gray-900 font-medium leading-5">Sarah Louis</span>
          <span className="block text-gray-900">Design Lead, Built</span>
        </div>
        <div>
          <p className="text-gray-500">
            Irure qui voluptate aute quis non ipsum. Laborum aliqua commodo eu et eiusmod laboris quis culpa ipsum
            veniam.
          </p>
        </div>
      </div>
    </div>
    <div>
      <img
        className="mx-auto h-12 w-12 object-cover rounded-full"
        src="https://images.unsplash.com/photo-1506919258185-6078bba55d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1030&q=80"
        alt="George"
      />
      <div className="pt-2 pb-4 px-4 -mt-6 flex flex-col justify-between bg-gray-50 rounded-md space-y-2">
        <div className="mt-6 space-y-2 text-center">
          <span className="block text-xl text-gray-900 font-medium leading-5">George Lopez</span>
          <span className="block text-gray-900">Tech Lead, Logist</span>
        </div>
        <div>
          <p className="text-gray-500">
            Ad Lorem ullamco cillum dolor voluptate duis. Culpa minim consequat dolore enim mollit pariatur tempor
            deserunt reprehenderit dolore minim aute.
          </p>
        </div>
      </div>
    </div>
  </div>
);