<div class="w-full md:w-1/3">
  <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
    <div class="px-4 py-5 flex-auto">
      <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-gradient-to-b from-red-400 to-red-600 bg-red-400">
        <i class="fas fa-award"></i>
      </div>
      <h6 class="text-xl font-semibold">Awarded Agency</h6>
      <p class="mt-2 mb-4 text-blueGray-400">Divide details about your product or agency work into parts. A paragraph describing a feature will be enough.</p>
    </div>
  </div>
</div>

<div class="w-full md:w-1/3">
  <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-lightBlue-500">
    <img alt="..." src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80" class="w-full align-middle rounded-t-lg"><blockquote class="relative p-8 mb-4"><svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block h-95-px -top-94-px"><polygon points="-30,95 583,95 583,65" class="text-lightBlue-500 fill-current"></polygon></svg>
    <h4 class="text-xl font-bold text-white">Top Notch Services</h4>
    <p class="text-md font-light mt-2 text-white">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever happens.</p></blockquote>
  </div>
</div>

<div class="w-full">
    <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200">
        <div class="flex-auto p-5 lg:p-10">
            <h4 class="text-2xl font-semibold">Want to work with us?</h4>
            <p class="leading-relaxed mt-1 mb-4 text-blueGray-500">Complete this form and we will get back to you in 24 hours.</p>
            <div class="mt-8">
                <div class="relative w-full mb-3">
                    <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Full Name</label>
                    <input placeholder="Full Name" type="text" class="px-3 py-3 placeholder-blueGray-400 text-blueGray-500 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 border-transparent">
                </div>
                <div class="relative w-full mb-3">
                    <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email</label>
                    <input placeholder="Email" type="email" class="px-3 py-3 placeholder-blueGray-400 text-blueGray-500 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 border-transparent">
                </div>
                <div class="relative w-full mb-3">
                    <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Message</label>
                    <textarea placeholder="Type a message..." type="textarea" rows="4" cols="80" class="px-3 py-3 placeholder-blueGray-400 text-blueGray-500 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 border-transparent"></textarea>
                </div>
            </div>
            <div class="text-center mt-6">
                <button class="text-xs px-4 py-2 shadow hover:shadow-md text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 rounded outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold">Send Message</button>
            </div>
        </div>
    </div>
</div>

<div class="w-full md:w-1/3">
    <div class="shadow-lg rounded border-0 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg text-white bg-blueGray-500">
        <img class="w-full flex-shrink-0 rounded-t-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/img-1.f2fd521a.jpg" alt="...">
        <blockquote class="p-6 relative mb-4">
            <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="block w-full absolute text-blueGray-700 h-95-px -top-94-px left-0">
                <polygon points="0,52 583,95 0,95" class="text-blueGray-500 fill-current"></polygon>
                <polygon points="0,42 583,95 683,0 0,95" opacity=".2" class="text-blueGray-500 fill-current"></polygon>
            </svg>
            <h4 class="text-2xl font-semibold mt-0 text-white">Notus Design System</h4>
            <p class="text-white mt-2">That’s my skill, I like to create things that last many years. I’m not really specifically talented at anything except for the ability to learn. That's it, see you at top...</p>
        </blockquote>
    </div>
</div>

<div class="w-full md:w-1/3">
    <div class="bg-orange-500 mt-8 rounded-lg text-left p-6 flex items-start">
        <div class="flex-1">
            <div class="text-orange-500 bg-white shadow-lg rounded rounded-full justify-center items-center text-center p-2 mx-auto mb-5 inline-flex w-12 h-12">
                <i class="fas fa-smile-beam text-xl"></i>
            </div>
            <h4 class="text-2xl font-semibold leading-normal text-white">Best Quality</h4>
            <p class="mt-2 text-white">It becomes harder for us to give others a hand. We get our heart broken by people we love.</p>
        </div>
    </div>
</div>

<div class="w-full md:w-1/3">
    <div class="h-530-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
        <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url(../../assets/img/guitar-play.jpg); backface-visibility: hidden;">
        </div>

        <div class="absolute w-full h-full bg-black opacity-50 rounded-lg">

        </div><a href="javascript:;">
            <div class="absolute text-left p-6 bottom-0">
                <h6 class="text-xl leading-normal mb-0 text-white opacity-75">All the beautiful places</h6>
                <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Research by Bang &amp; Olufsen on city sounds and music</h5>
            </div>
        </a>
    </div>
</div>

<div class="w-full md:w-1/3">
    <div class="bg-white mb-6 text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 rounded-lg">
        <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-200">
            <h6 class="font-bold my-2">Standard</h6>
        </div>
        <div class="px-4 py-5 flex-auto">
            <div class="text-5xl mt-0 mb-0 font-bold">$25</div>
            <span> per month </span>
            <ul class="mt-6 mb-0 list-none">
                <li class="py-1 text-blueGray-500">
                    <b class="text-lightBlue-500"> 20GB </b>File Storage
                </li>
                <li class="py-1 text-blueGray-500">
                    <b class="text-lightBlue-500"> 15 </b>Users/project
                </li>
                <li class="py-1 text-blueGray-500">
                    <b class="text-lightBlue-500"> 4.000 </b>Internal messages
                </li>
            </ul>
        </div>
        <div class="mt-4 py-6 bg-transparent bg-transparent rounded-b px-4 py-3 border-t border-blueGray-200">
            <a href="javascript:;" class="text-lightBlue-500">Request a demo</a>
        </div>
    </div>
</div>

<div class="w-full md:w-1/2">
    <div class="overflow-hidden mb-12 rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded h-550-px transition-all duration-150 ease-in-out hover:transform hover:scale-110 group">
        <div class="absolute rounded-lg w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110" style="background-image: url(../../assets/img/sections/unsplashs.jpg); backface-visibility: hidden;">
        </div>
        <div class="absolute rounded-lg w-full h-full bg-black opacity-50">
        </div>
        <div class="p-10 flex h-full items-end z-1">
            <div>
                <h1 class="text-4xl font-semibold mt-0 mb-2 text-white">Miami Vice</h1>
                <p class="text-white opacity-75 text-lg">The simplest visual description uses ordinary words to convey what the writer sees. First he or she must look at the subject – slowly, carefully, and repeatedly, if possible – to identify the parts that make the whole</p>
                <div class="py-4 mb-3 flex items-start">
                    <a href="javascript:;" class="flex items-center">
                        <img src="../../assets/img/team-1-800x800.jpg" class="rounded-full mr-4" alt="..." style="max-width: 40px;">
                        <div class="flex-1">
                            <div class="justify-between items-center">
                                <h6 class="text-sm uppercase mb-2 mt-2 text-white font-semibold">by Martin Jay</h6>
                            </div>
                        </div>
                    </a>
                </div>
                <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-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Read more...</button>
            </div>
        </div>
    </div>
</div>

<div class="w-full md:w-8/12">
    <div class="rounded-lg p-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl z-2">
       <div class="px-4 py-5 flex-auto">
          <div class="flex flex-wrap -mx-4">
             <div class="px-4 relative w-full  md:w-6/12  ">
                <div class="pb-4">
                   <label class="inline-block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Name</label>
                   <div class="relative flex w-full flex-wrap items-stretch mb-3">
                      <span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-user-circle"></i></span><input placeholder="ex: John Smith" type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 ">
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full  md:w-6/12  ">
                <div class="pb-4">
                   <label class="inline-block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Job Title</label>
                   <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-book"></i></span><input placeholder="ex: Managing Parter" type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 ">
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full    ">
                <div class="pb-4">
                   <label class="inline-block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email address</label>
                   <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-envelope"></i>
                      </span><input placeholder="Email address..." type="email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 ">
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full    ">
                <div class="pb-4">
                   <label class="inline-block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your message</label>
                   <div class="mb-3 pt-0"><textarea rows="6" type="textarea" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></textarea></div>
                </div>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4">
             <div class="ml-auto text-right px-4 relative w-full md:w-6/12"><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-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Contact Us</button></div>
          </div>
       </div>
    </div>
 </div>