Media

<div class="w-full">
    <div class="mt-12 relative">
       <div class="relative w-full overflow-hidden px-4">
          <div class="p-6 transform duration-300 transition-all ease-in-out mx-auto relative w-full block">
             <div class="text-lightBlue-500 bg-lightBlue-500 absolute top-0 left-0 z-4 p-8 max-w-360-px mx-auto rounded-lg">
                <div class="mb-6 bg-white rounded-full w-16 h-16 flex items-center justify-center"><i class="text-lg fas fa-quote-right"></i></div>
                <p class="my-6 text-white leading-relaxed">Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. A single rose can be my garden... a single friend, my world.</p>
                <div class="flex items-center">
                   <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3.c5d0c11c.jpg" class="rounded-full mr-4 max-w-40-px">
                   <h6 class="text-xl font-normal leading-normal mb-2 text-white mt-2">Andre Lino</h6>
                </div>
             </div>
             <div class="pt-12 px-12">
                <div class="w-full relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-50 bg-cover h-500-px group">
                   <div class="h-full w-full absolute z-1 rounded-lg" style="background-image: url('../../assets/img/sections/unsplashs.jpg');"></div>
                   <div class="h-full w-full absolute z-2 bg-black opacity-50 rounded-lg"></div>
                   <div class="absolute bottom-0 right-0 mb-10 mr-10 z-3 bg-transparent"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">read more</button></div>
                </div>
             </div>
          </div>
          <div class="p-6 transform duration-300 transition-all ease-in-out mx-auto relative w-full hidden">
             <div class="text-red-500 bg-red-500 absolute top-0 left-0 z-4 p-8 max-w-360-px mx-auto rounded-lg">
                <div class="mb-6 bg-white rounded-full w-16 h-16 flex items-center justify-center"><i class="text-lg fas fa-quote-right"></i></div>
                <p class="my-6 text-white leading-relaxed">It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter. Because it's about motivating the doers. Because I’m here to follow my dreams and inspire other people to follow their dreams.</p>
                <div class="flex items-center">
                   <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1.26905a67.jpg" class="rounded-full mr-4 max-w-40-px">
                   <h6 class="text-xl font-normal leading-normal mb-2 text-white mt-2"> Mike John</h6>
                </div>
             </div>
             <div class="pt-12 px-12">
                <div class="w-full relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-50 bg-cover h-500-px group">
                   <div class="h-full w-full absolute z-1 rounded-lg" style="background-image: url('../../assets/img/sections/austin.jpg');"></div>
                   <div class="h-full w-full absolute z-2 bg-black opacity-50 rounded-lg"></div>
                   <div class="absolute bottom-0 right-0 mb-10 mr-10 z-3 bg-transparent"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">read more</button></div>
                </div>
             </div>
          </div>
          <div class="flex justify-center mb-12"><a href="javascript:;" class="text-white text-center opacity-50 hover:opacity-100 transition-opacity duration-150 ease-linear w-12 text-xl"><i class="text-lightBlue-500 fas fa-chevron-left"></i><span class="sr-only">Previous</span></a><a href="javascript:;" class="text-white text-center opacity-50 hover:opacity-100 transition-opacity duration-150 ease-linear w-12 text-xl"><i class="text-lightBlue-500 fas fa-chevron-right"></i><span class="sr-only">Next</span></a></div>
       </div>
    </div>
 </div>