Cards

<div class="w-full">
    <div class="mb-12 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
       <div class="items-center flex flex-wrap -mx-4">
          <div class="px-4 relative w-full lg:w-4/12"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/city-1.501c0bb7.jpg" class="w-full rounded-lg rounded-r-none" alt="..."></div>
          <div class="px-4 relative w-full lg:w-8/12">
             <div class="lg:pl-0 px-4 py-5 flex-auto">
                <h3 class="text-3xl font-semibold text-blueGray-700 leading-tight"><a href="javascript:;">Portofino one of the best for remote working</a></h3>
                <p class="mt-3 text-lg leading-relaxed text-blueGray-500"><span class="mr-2">Finding temporary housing should be as easy as renting an Airbnb. That’s the idea behind Portofino, which raised $65 million to expand its pet sitting businesses. This come as the right move for the investment while the planet is moving on work from home...</span><a href="javascript:;" class="text-lightBlue-500">Read More</a></p>
                <div class="mt-6">
                   <a href="javascript:;" class="inline-flex items-center">
                      <img src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" class="rounded-full mr-4 w-12 h-12" alt="...">
                      <div class="flex-1">
                         <div class="justify-between items-center">
                            <h6 class="text-md font-bold uppercase mt-0 mb-0 text-blueGray-500">Laura Hanks</h6>
                            <small class="text-sm text-blueGray-500 mt-0">Published 4 days ago</small>
                         </div>
                      </div>
                   </a>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

<div class="w-full md:w-1/3">
    <div class="bg-blueGray-800 text-white shadow-lg rounded-lg overflow-hidden relative flex flex-col min-w-0 w-full mb-6">
       <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/p7.a18c6e7f.svg" class="w-full" style="margin-top: -45%;">
       <div class="px-4 py-5 flex-auto">
          <h4 class="text-3xl mt-0 mb-2 my-4 font-bold">Bussiness Case</h4>
          <p class="text-xl font-light">Society has put up so many boundaries and limitations on what’s right and wrong that it’s almost impossible...</p>
          <a href="javascript:;" class="font-semibold text-sm uppercase py-3 inline-block">Read more</a>
       </div>
    </div>
 </div>

<div class="w-full md:w-1/3">
    <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <div class="relative">
          <img alt="..." class="w-full flex-shrink-0 rounded-t-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-6.c98b9ea7.jpg">
          <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="block w-full absolute text-white svg-bg" style="height: 95px; bottom: 0px;">
             <polygon points="583,55 583,95 0,95" style="fill: currentcolor;"></polygon>
          </svg>
       </div>
       <div class="px-4 py-5 flex-auto">
          <h3 class="text-2xl font-bold">Sofie Allure</h3>
          <p class="text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase">Managing Partner</p>
          <div class="block w-full" style="overflow-x: auto;">
             <ul class="list-none">
                <li class="py-1">
                   <div class="flex items-center">
                      <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-lightBlue-500 bg-lightBlue-200"><i class="fab fa-facebook"></i></span>
                      <h6 class="text-md text-blueGray-500">At Facebook since 2016</h6>
                   </div>
                </li>
                <li class="py-1">
                   <div class="flex items-center">
                      <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200"><i class="fas fa-running"></i></span>
                      <h6 class="text-md text-blueGray-500">Outdors lover</h6>
                   </div>
                </li>
                <li class="py-1">
                   <div class="flex items-center">
                      <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200"><i class="fas fa-headset"></i></span>
                      <h6 class="text-md text-blueGray-500">Super friendly support team</h6>
                   </div>
                </li>
             </ul>
          </div>
       </div>
    </div>
 </div>

<div class="w-full md:w-1/4">
    <a href="javascript:;" class="w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-blueGray-500 border-blueGray-500 active:bg-blueGray-600 active:border-blueGray-600">
       <i class="my-4 text-2xl fab fa-twitter"></i>
       <h2 class="text-5xl leading-normal font-bold lowercase mt-2">blueGray</h2>
       <p><small class="uppercase">@creativetim</small></p>
    </a>
 </div>