InfoAreas

<div class="w-full md:w-1/2">
  <div class="text-blueGray-500 bg-white p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full"><i class="fas fa-user-friends text-xl"></i></div>
  <h3 class="text-3xl mb-2 font-semibold leading-normal">Working with us is a pleasure</h3>
  <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-700">Don't let your users guess by attaching tooltips and popoves to any element. Just make sure you enable them first via JavaScript.</p>
  <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-700">The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. Just make sure you enable them first via JavaScript.</p>
  <a class="font-bold text-blueGray-800 mt-8" href="#/">Check Notus Design System PRO!</a>
</div>

<div class="w-full md:w-1/2">
  <div class="text-lightBlue-500 bg-lightBlue-200 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full"><i class="fas fa-rocket text-xl"></i></div>
  <h3 class="text-3xl font-semibold">A growing company</h3>
  <p class="mt-4 text-lg leading-relaxed text-blueGray-500">The extension comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go.</p>
  <ul class="list-none mt-6">
    <li class="py-2">
      <div class="flex items-center">
        <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="fas fa-fingerprint"></i></span></div>
        <div>
          <h4 class="text-blueGray-500">Carefully crafted components</h4>
        </div>
      </div>
    </li>
    <li class="py-2">
      <div class="flex items-center">
        <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="fas fa-pager"></i></span></div>
        <div>
          <h4 class="text-blueGray-500">Amazing page examples</h4>
        </div>
      </div>
    </li>
    <li class="py-2">
      <div class="flex items-center">
        <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="far fa-paper-plane"></i></span></div>
        <div>
          <h4 class="text-blueGray-500">Dynamic components</h4>
        </div>
      </div>
    </li>
  </ul>
</div>

<div class="w-full">
  <div class="px-6">
    <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.jpg" class="shadow-lg rounded-full mx-auto max-w-120-px">
    <div class="pt-6 text-center">
      <h5 class="text-xl font-bold">Ryan Tompson</h5>
      <p class="mt-1 text-sm text-blueGray-400 uppercase font-bold">Web Developer</p>
      <div class="mt-6"><a href="javascript:;" target="_blank" type="button" class="bg-lightBlue-400 inline-flex items-center justify-center text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"><i class="fab fa-twitter"></i></a><a href="javascript:;" target="_blank" type="button" class="bg-lightBlue-500 inline-flex items-center justify-center text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"><i class="fab fa-facebook"></i></a><a href="javascript:;" target="_blank" type="button" class="bg-pink-500 inline-flex items-center justify-center text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"><i class="fab fa-dribbble"></i></a></div>
    </div>
  </div>
</div>

<div class="w-full md:w-1/4">
  <div class="text-blueGray-900 bg-white p-3 w-12 h-12 shadow-lg rounded-full inline-flex items-center justify-center"><i class="fas fa-medal text-xl"></i></div>
  <h6 class="text-white text-xl mt-5 font-semibold">Excelent Services</h6>
  <p class="text-blueGray-500 mt-2 mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>

<div class="w-full md:w-1/3">
  <div
    class="
      text-lightBlue-500
      border-lightBlue-500
      shadow-lg
      rounded-full
      justify-center
      items-center
      inline-flex
      text-center
      mb-2
      bg-white
      w-16
      h-16
    "
  >
    <i class="fas fa-cog text-1625"></i>
  </div>
  <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">
    Social Conversation
  </h6>
  <p class="mb-2 text-blueGray-400">
    We get insulted by others, lose trust for those others. We get back
    stabbed by friends. It becomes harder for us to give others a hand.
  </p>
  <a class="text-lightBlue-500" href="javascript:;"
    >More about us <i class="ml-1 fas fa-angle-right"></i
  ></a>
</div>

<div class="w-full">
  <div class="text-center py-6">
    <div
      class="
        text-white
        bg-lightBlue-500
        shadow-lg
        rounded rounded-full
        justify-center
        items-center
        inline-flex
        text-center
        p-2
        mb-6
        w-16
        h-16
      "
    >
      <i class="fas fa-map-marker-alt text-lg"></i>
    </div>
    <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Address</h4>
    <div class="mb-4">
      <p class="text-blueGray-500">12124 First Street, nr 54</p>
    </div>
  </div>
</div>