Media Player

<div class="w-full">
  <div class="py-12">
    <div class="flex flex-wrap -mx-4">
      <div class="relative">
        <div class="relative w-full overflow-hidden">
          <div class="relative float-left w-full transform duration-500 transition-all ease-in-out block">
            <div class="container mx-auto px-4">
              <div class="flex flex-wrap -mx-4">
                <div class="px-12 py-12 px-4 relative w-full md:w-5/12 ml-auto">
                  <div class="p-6"><img class="w-full rounded-lg shadow-xl transform" src="https://demos.creative-tim.com/notus-pro-react/static/media/kareya-saleh.b94f8020.jpg" alt="..."></div>
                </div>
                <div class="pt-12 px-4 relative w-full md:w-5/12 mr-auto flex align-center items-center">
                  <div class="p-4 pt-6 md:p-0">
                    <h2 class="text-2xl font-bold mt-0 mb-2">Lili Watson</h2>
                    <p class="mt-3 text-lg leading-relaxed text-blueGray-500">Artist is a term applied to a person who engages in an activity deemed to be an art. An artist also may be defined unofficially as "a person should is one who expresses him- or herself through a medium".</p>
                    <ul class="mt-6 list-none">
                      <li class="py-2">
                        <div class="flex items-center">
                          <span class="inline-flex text-center rounded-full mr-3 items-center justify-center text-sm w-8 h-8 text-pink-500 bg-pink-200"><i class="fas fa-atom"></i></span>
                          <h6 class="text-md text-blueGray-500">Dedicated entrepreneur</h6>
                        </div>
                      </li>
                      <li class="py-2">
                        <div class="flex items-center">
                          <span class="inline-flex text-center rounded-full mr-3 items-center justify-center text-sm w-8 h-8 text-emerald-500 bg-emerald-200"><i class="fas fa-running"></i></span>
                          <h6 class="text-md text-blueGray-500">Urban city exploration</h6>
                        </div>
                      </li>
                      <li class="py-2">
                        <div class="flex items-center">
                          <span class="inline-flex text-center rounded-full mr-3 items-center justify-center text-sm w-8 h-8 text-lightBlue-500 bg-lightBlue-200"><i class="fab fa-facebook"></i></span>
                          <h6 class="text-md text-blueGray-500">Active on Facebook since 2015</h6>
                        </div>
                      </li>
                    </ul>
                    <div class="py-6 pl-12 text-left"><a href="javascript:;" 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-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fab fa-twitter"></i></a><a href="javascript:;" 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-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fab fa-facebook"></i></a><a href="javascript:;" 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-white bg-dribbble-regular border-dribbble-regular active:bg-dribbble-active active:border-dribbble-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fab fa-dribbble"></i></a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="relative w-full -mt-12"><a href="javascript:;" class="absolute z-1 top-0 bottom-0 flex items-center justify-center w-1/6 text-white text-center opacity-50 hover:opacity-100 transition-opacity duration-150 ease-linear left-0" style="left: 90%; width: 5%;"><i class="text-lightBlue-500 fas fa-chevron-left"></i><span class="sr-only">Previous</span></a><a href="javascript:;" class="absolute z-1 top-0 bottom-0 flex items-center justify-center w-1/6 text-white text-center opacity-50 hover:opacity-100 transition-opacity duration-150 ease-linear right-0" style="width: 5%;"><i class="text-lightBlue-500 fas fa-chevron-right"></i><span class="sr-only">Next</span></a></div>
    </div>
  </div>
</div>