PresentationComponents

Cards

Card Info Icon Left

Copied

Modular Components

The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever and whatever.

Learn more

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="bg-white text-blueGray-800 rounded-lg text-left p-6 flex items-start">
       <div class="bg-lightBlue-500 text-white shadow-lg rounded-full justify-center items-center inline-flex text-center p-2 text-xl w-12 h-12"><i class="fas fa-hat-wizard"></i></div>
       <div class="ml-6 flex-1">
          <h6 class="text-lightBlue-500 text-xl font-bold mt-3 mb-0">Modular Components</h6>
          <p class="text-blueGray-500 mt-2 mb-4 leading-relaxed">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever and whatever.</p>
          <a href="javascript:;" class="text-lightBlue-500">Learn more</a>
       </div>
    </div>
 </div>

Card Info With Button

Copied

Download Design

Because I’m here to follow my dreams and inspire other people to follow their dreams, too. That’s what I’m here for.

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="shadow-lg rounded-lg bg-white relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <div class="p-6 flex-auto">
          <div class="bg-lightBlue-500 text-white shadow-lg rounded-full justify-center items-center mx-auto mb-6 inline-flex w-12 h-12"><i class="fas fa-check text-xl"></i></div>
          <h6 class="text-lightBlue-500 text-xl font-bold mt-0 mb-0">Download Design</h6>
          <p class="mt-2 mb-4 leading-relaxed text-blueGray-500">Because I’m here to follow my dreams and inspire other people to follow their dreams, too. That’s what I’m here for.</p>
          <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-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Learn more</button>
       </div>
    </div>
 </div>

Card Blog and Author

Copied

That’s One Way To Ditch Your Castle

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...

Tania Hanks 2.3K

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="mb-12 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 rounded-lg">
       <a href="javascript:;">
          <img alt="..." class="shadow-lg rounded-lg w-full flex-shrink-0" src="https://demos.creative-tim.com/notus-pro-react/static/media/castle-1.180e8ed5.jpg">
          <h3 class="text-2xl font-bold leading-tight ml-1 mt-6">That’s One Way To Ditch Your Castle</h3>
       </a>
       <p class="mt-3 leading-relaxed text-blueGray-500 ml-1">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...</p>
       <div class="mt-6 flex items-center">
          <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4.639c2559.jpg" class="rounded-full mr-3 max-w-40-px">
          <div class="flex-1">
             <div class="justify-between items-center">
                <h6 class="font-bold mt-0 mb-0">Tania Hanks<small class="text-sm text-blueGray-500 float-right"><i class="fas fa-heart opacity-75 text-red-500 mr-1"></i> 2.3K</small></h6>
             </div>
          </div>
       </div>
    </div>
 </div>

Card Profile Skills

Copied

John Darwin

Web Designer

Skill

Leadership

Hobbies

Skiing, Chess

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <img class="w-full flex-shrink-0 rounded-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/person-suit-3.e4a85420.jpg" alt="...">
       <div class="absolute w-full p-4 bottom-0">
          <div class="bg-white rounded p-6 w-full">
             <h3 class="text-2xl font-bold leading-tight mt-0 mb-1">John Darwin</h3>
             <p class="text-lg font-normal leading-normal mb-4 text-blueGray-400">Web Designer</p>
             <div class="block w-full overflow-x-auto">
                <div class="w-full">
                   <div class="border-t border-blueGray-200 flex items-center justify-between py-2">
                      <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="fas fa-hat-wizard"></i></span><span class="text-blueGray-500 uppercase text-sm font-bold">Skill</span></div>
                      <span>Leadership</span>
                   </div>
                   <div class="border-t border-blueGray-200 flex items-center justify-between py-2">
                      <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="far fa-user"></i></span><span class="text-blueGray-500 uppercase text-sm font-bold">Hobbies</span></div>
                      <span>Skiing, Chess</span>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

Card Profile Full Details

Copied

NameTony Mark

PositionProject Manager

2,367Followers

247Projects

1,189Commits

Team

<div class="w-full lg:w-8/12">
    <div class="text-left overflow-hidden shadow-lg rounded-lg relative flex flex-col md:flex-row min-w-0 break-words bg-white w-full mb-6">
       <img alt="..." class="w-full md:w-1/2" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-5.290afc74.jpg">
       <div class="w-full mt-4 flex flex-col items-center md:w-1/2 md:mt-0">
          <div class="p-10 flex-auto w-full">
             <div class="py-4">
                <div class="text-left p-0"><span class="text-blueGray-400 uppercase text-sm font-bold">Name</span><span class="font-bold block text-2xl">Tony Mark</span></div>
             </div>
             <div class="py-4">
                <div class="text-left p-0"><span class="text-blueGray-400 uppercase text-sm font-bold">Position</span><span class="font-bold block text-2xl">Project Manager</span></div>
             </div>
             <div class="py-2 flex border-t border-blueGray-200">
                <div class="text-center mr-4 pr-4 py-4"><span class="font-bold block uppercase text-lg">2,367</span><span class="text-blueGray-500">Followers</span></div>
                <div class="text-center mr-4 pr-4 py-4"><span class="font-bold block uppercase text-lg">247</span><span class="text-blueGray-500">Projects</span></div>
                <div class="text-center mr-4 pr-4 py-4"><span class="font-bold block uppercase text-lg">1,189</span><span class="text-blueGray-500">Commits</span></div>
             </div>
             <div class="py-4">
                <span class="font-bold block uppercase mb-2">Team</span>
                <div class="pl-4">
                   <div class="flex items-center">
                      <div>
                         <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                            <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg">
                            <div class="hidden ">
                               <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                                  <div class="py-1 px-2 text-center rounded text-white bg-black">Ray Tompson</div>
                               </div>
                            </div>
                         </a>
                         <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                            <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2.b81557ef.jpg">
                            <div class="hidden ">
                               <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                                  <div class="py-1 px-2 text-center rounded text-white bg-black">Romina Hadid</div>
                               </div>
                            </div>
                         </a>
                         <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                            <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1.26905a67.jpg">
                            <div class="hidden ">
                               <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                                  <div class="py-1 px-2 text-center rounded text-white bg-black">Alexander Smith</div>
                               </div>
                            </div>
                         </a>
                         <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                            <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-2.33e80fee.jpg">
                            <div class="hidden ">
                               <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                                  <div class="py-1 px-2 text-center rounded text-white bg-black">Jessica Doe</div>
                               </div>
                            </div>
                         </a>
                      </div>
                      <small class="pl-2 font-bold mb-1"></small>
                   </div>
                </div>
             </div>
             <div class="w-full bg-transparent rounded-b px-4 pt-6 border-t border-blueGray-200 text-center mt-4"><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-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Follow</button></div>
          </div>
       </div>
    </div>
 </div>

Card Profile Actions

Copied

5,390Followers

560Photos

890Projects

Melanie Tompson

Beijing, China

<div class="w-full lg:w-1/2">
    <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <div class="bg-red-500 mb-12 w-full border-0 rounded-t-lg px-5 py-3 h-140-px bg-bottom bg-cover" style="background-image: url('../../assets/img/illustrations/inn.svg');">
          <div class="flex justify-center"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/face-2.33e80fee.jpg" class="rounded-full shadow-lg align-middle absolute mt-12 border-4 border-white max-w-150-px"></div>
       </div>
       <div class="px-4 py-5 flex-auto">
          <div class="flex justify-center mt-8"><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-xs px-3 py-2 shadow hover:shadow-md rounded-md">Connect</button><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-xs px-3 py-2 shadow hover:shadow-md rounded-md">Message</button></div>
          <div class="flex flex-wrap -mx-4">
             <div class="px-4 relative w-full">
                <div class="py-4 flex justify-center">
                   <div class="text-center mr-4 p-4"><span class="font-bold text-xl block">5,390</span><span class="text-blueGray-400">Followers</span></div>
                   <div class="text-center mr-4 p-4"><span class="font-bold text-xl block">560</span><span class="text-blueGray-400">Photos</span></div>
                   <div class="text-center mr-4 p-4"><span class="font-bold text-xl block">890</span><span class="text-blueGray-400">Projects</span></div>
                </div>
             </div>
          </div>
          <div class="text-center">
             <h3 class="text-2xl font-bold leading-tight mt-0 mb-1">Melanie Tompson</h3>
             <p class="text-lg text-blueGray-400">Beijing, China</p>
          </div>
       </div>
    </div>
 </div>

Card Profile Reviews

Copied

Christian Paisley

New York, USA

7,800Finished Rides

4.9/5Stars

<div class="w-full lg:w-1/2">
    <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 bg-white w-full mb-6">
       <div class="bg-blueGray-800 mb-12 w-full border-0 rounded-t-lg px-5 py-3 h-140-px bg-bottom bg-cover" style="background-image: url('../../assets/img/illustrations/linth3.svg');">
          <div class="flex justify-center"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/christian.5e3b567c.jpg" class="rounded-full shadow-lg align-middle absolute mt-16 border-4 border-white max-w-150-px"></div>
       </div>
       <div class="px-4 py-5 flex-auto">
          <div class="text-center mt-12">
             <h3 class="text-2xl font-bold leading-tight mt-0 mb-1">Christian Paisley</h3>
             <p class="text-blueGray-400 text-lg">New York, USA</p>
          </div>
          <div class="py-4 flex justify-center">
             <div class="text-center mr-4 p-4"><span class="font-bold text-lg block">7,800</span><span class="text-blueGray-400">Finished Rides</span></div>
             <div class="text-center mr-4 p-4"><span class="font-bold text-lg block">4.9/5</span><span class="text-blueGray-400">Stars</span></div>
          </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-emerald-500 border-emerald-500 active:bg-emerald-600 active:border-emerald-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">Send Tips</button>
       </div>
    </div>
 </div>

Card Project Team

Copied

Work in Progress

Slack

We are more than happy to work at such a great project.

and 30+ more

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="mb-6 text-center shadow-lg rounded-lg relative flex flex-col bg-white p-6 w-full mb-6">
       <div class="flex items-center justify-between pb-4 pt-2 border-b border-blueGray-300">
          <div class="float-left ml-1">
             <i class="opacity-75 inline mr-2 fas fa-shopping-basket undefined"></i>
             <p class="inline text-lg">Work in Progress</p>
          </div>
       </div>
       <div class="py-6 flex-auto">
          <div class="shadow-lg mt-6 rounded-full my-6 mx-auto w-100-px p-6 bg-white"><img src="data:image/png;base64,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" alt="..." class="mx-auto"></div>
          <h4 class="text-2xl font-bold leading-tight mt-0 mb-2">Slack</h4>
          <p class="text-blueGray-500 px-8">We are more than happy to work at such a great project.</p>
          <div class="flex justify-center mt-8 mb-2 text-blueGray-400">
             <div class="flex items-center">
                <div>
                   <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1.26905a67.jpg">
                      <div class="hidden ">
                         <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                            <div class="py-1 px-2 text-center rounded text-white bg-black">Slack</div>
                         </div>
                      </div>
                   </a>
                   <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-2.33e80fee.jpg">
                      <div class="hidden ">
                         <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                            <div class="py-1 px-2 text-center rounded text-white bg-black">Slack</div>
                         </div>
                      </div>
                   </a>
                   <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3.c5d0c11c.jpg">
                      <div class="hidden " data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(-6px, -36.0125px);">
                         <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                            <div class="py-1 px-2 text-center rounded text-white bg-black">Slack</div>
                         </div>
                      </div>
                   </a>
                   <a class="text-white bg-blueGray-500 inline-flex items-center justify-center shadow-lg rounded rounded-full relative border-2 border-white -ml-4 hover:z-1 w-10 h-10" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4.639c2559.jpg">
                      <div class="hidden ">
                         <div class="border-0 mb-3 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded">
                            <div class="py-1 px-2 text-center rounded text-white bg-black">Slack</div>
                         </div>
                      </div>
                   </a>
                </div>
                <small class="pl-2 font-bold mb-1">and 30+ more</small>
             </div>
          </div>
       </div>
    </div>
 </div>

Card Project Image Full Bg

Copied

Latest Boats Project

This is our latest project for the beautiful Portofino Boats...

<div class="w-full md:w-1/2 lg: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-50 bg-cover p-10" style="background-image: url('../../assets/img/portofino-1.jpg');">
       <div class="absolute w-full h-full top-0 left-0 bg-black opacity-60 z-0 rounded-lg"></div>
       <div class="text-left flex-auto z-1">
          <div class="mr-auto mb-6 bg-white rounded-full w-16 h-16 text-center inline-flex items-center justify-center "><i class="text-orange-500 text-2xl fas fa-anchor"></i></div>
          <h3 class="text-3xl font-bold mt-0 mb-2 text-white leading-tight">Latest Boats Project</h3>
          <h6 class="text-white opacity-75 text-xl mt-0 mb-4">This is our latest project for the beautiful Portofino Boats...</h6>
          <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-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">Find more...</button>
       </div>
    </div>
 </div>

Card Pricing Details

Copied

Starter License

$149

per month

Complete documentation
Working materials in Sketch
10,000+ messages in Cloud

Buy Now

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="bg-lightBlue-500 mb-6 text-center text-white shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 text-white">
       <div class="bg-transparent first:rounded-lg-t px-5 py-3 mx-4 border-b border-black border-opacity-10">
          <h4 class="font-bold uppercase my-2 text-white">Starter License</h4>
       </div>
       <div class="lg:px-12 px-4 py-5 flex-auto">
          <div class="text-6xl font-normal leading-tight font-bold text-white">$149</div>
          <span>per month</span>
          <ul class="my-8 list-none">
             <li class="py-2">
                <div class="flex items-center">
                   <span class="text-lightBlue-500 inline-flex text-center rounded-full mr-3 items-center justify-center w-10 h-10 bg-white"><i class="fas fa-book"></i></span>
                   <h6 class="text-lg">Complete documentation</h6>
                </div>
             </li>
             <li class="py-2">
                <div class="flex items-center">
                   <span class="text-lightBlue-500 inline-flex text-center rounded-full mr-3 items-center justify-center w-10 h-10 bg-white"><i class="fab fa-sketch"></i></span>
                   <h6 class="text-lg">Working materials in Sketch</h6>
                </div>
             </li>
             <li class="py-2">
                <div class="flex items-center">
                   <span class="text-lightBlue-500 inline-flex text-center rounded-full mr-3 items-center justify-center w-10 h-10 bg-white"><i class="fas fa-cloud"></i></span>
                   <h6 class="text-lg">10,000+ messages in Cloud</h6>
                </div>
             </li>
          </ul>
          <a href="javascript:;" class="py-2 text-white uppercase font-bold">Buy Now</a>
       </div>
       <div class="mt-2 px-4 py-4 border-t border-black border-opacity-10 mx-4"><a href="javascript:;" class="text-white opacity-75">Contact us?</a></div>
    </div>
 </div>

Card Pricing List

Copied

Freelancer

$99

1Team Member
15Private Projects
25Elements of Design
1.000Commits/month

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="bg-lightBlue-500 pt-12 mb-6 text-center text-white shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 bg-contain bg-no-repeat bg-50-top" style="background-image: url('../../assets/img/illustrations/pricing_bg.svg');">
       <div class="mt-12 px-4 py-5 flex-auto">
          <h6 class="font-bold uppercase mb-2">Freelancer</h6>
          <div class="text-6xl font-bold leading-tight mt-0 mb-2">$99</div>
          <ul class="my-6 mx-4 list-none">
             <li class="py-3 border-b border-black border-opacity-10"><b class="mr-2">1</b>Team Member</li>
             <li class="py-3 border-b border-black border-opacity-10"><b class="mr-2">15</b>Private Projects</li>
             <li class="py-3 border-b border-black border-opacity-10"><b class="mr-2">25</b>Elements of Design</li>
             <li class="py-3 border-b border-black border-opacity-10"><b class="mr-2">1.000</b>Commits/month</li>
          </ul>
          <div class="mb-6"><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-xs px-3 py-2 shadow hover:shadow-md rounded-md">get started</button></div>
       </div>
    </div>
 </div>

Card Pricing Logo

Copied

$39

Standard Pack

50 messages
100 emails/day
Community Support

<div class="w-full md:w-1/2 lg:w-1/3">
    <div class="mt-12 shadow-lg rounded-lg bg-white w-full mb-6">
       <div class="pt-4"><img alt="..." class="block mx-auto w-100-px" src="data:image/jpeg;base64,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"></div>
       <div class="text-center p-5 flex-auto">
          <div class="flex flex-wrap">
             <div class="px-4 relative w-full">
                <span class="text-blueGray-500 mt-2 text-5xl">$39</span>
                <h5 class="text-2xl font-bold leading-tight mt-2 mb-2">Standard Pack</h5>
                <hr class="border-emerald-500 my-2 mx-auto w-1/5">
             </div>
          </div>
          <div class="flex flex-wrap">
             <ul class="mt-2 mb-6 list-none mx-auto text-center flex flex-col">
                <li class="py-1 text-blueGray-500">50 messages</li>
                <li class="py-1 text-blueGray-500">100 emails/day</li>
                <li class="py-1 text-blueGray-500">Community Support</li>
             </ul>
          </div>
          <div class="pb-4"><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">get plan</button></div>
       </div>
    </div>
 </div>

Card Contact Us Address

Copied

Contact Us

Give us a ring

Alice Grace

+40 762 321 762

Mon - Fri, 8:00-17:00

Find us at

St. Michael Kog, no. 8,

7652 San Francisco,

United States

First name

Email address

<div class="w-full md:w-1/2">
    <div class="shadow-lg rounded-lg text-blueGray-500 ml-12 p-6 mt-12 mb-12 relative flex flex-col min-w-0 break-words bg-white w-full">
       <h4 class="text-xl font-bold leading-tight pb-6">Contact Us</h4>
       <div class="flex-auto">
          <div class="flex flex-wrap -mx-4">
             <div class="px-4 relative w-full  md:w-6/12  ">
                <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-phone text-lg"></i></div>
                   <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Give us a ring</h4>
                   <div class="mb-4">
                      <p class="text-blueGray-500">Alice Grace</p>
                      <p class="text-blueGray-500">+40 762 321 762</p>
                      <p class="text-blueGray-500">Mon - Fri, 8:00-17:00</p>
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full  md:w-6/12  ">
                <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">Find us at</h4>
                   <div class="mb-4">
                      <p class="text-blueGray-500">St. Michael Kog, no. 8,</p>
                      <p class="text-blueGray-500">7652 San Francisco,</p>
                      <p class="text-blueGray-500">United States</p>
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full  md:w-6/12  ">
                <div class="mb-3 pt-0 relative">
                   <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">First name</label>
                   <div class="mb-3 pt-0"><input placeholder="First name..." 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 "></div>
                </div>
             </div>
             <div class="px-4 relative w-full  md:w-6/12  ">
                <div class="mb-3 pt-0 relative">
                   <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email address</label>
                   <div class="mb-3 pt-0"><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 "></div>
                </div>
             </div>
          </div>
          <div class="w-full text-right mt-2"><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-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Send Message</button></div>
       </div>
    </div>
 </div>

Card Contact Us Horizontal

Copied

Send us a message

Our team will reply in 2-3 business days

First name

Email address

Your message

Other contact details

Come and visit us

5th Avenue, New York

+40 (312) 563 241

[email protected]

<div class="w-full">
    <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <div class="flex flex-wrap">
          <div class="p-6 relative w-full lg:w-8/12 md:w-7/12">
             <div class="pb-4 border-b border-blueGray-300">
                <h4 class="text-xl font-bold leading-tight mt-0">Send us a message</h4>
                <p class="mt-1 text-blueGray-500">Our team will reply in 2-3 business days</p>
             </div>
             <div class="pt-6 flex-auto">
                <div class="flex flex-wrap -mx-4">
                   <div class="px-4 relative w-full  md:w-6/12  ">
                      <div class="mb-3 pt-0 relative">
                         <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1 mt-2">First name</label>
                         <div class="mb-3 pt-0"><input placeholder="First name..." 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 "></div>
                      </div>
                   </div>
                   <div class="px-4 relative w-full  md:w-6/12  ">
                      <div class="mb-3 pt-0 relative">
                         <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1 mt-2">Email address</label>
                         <div class="mb-3 pt-0"><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 "></div>
                      </div>
                   </div>
                   <div class="px-4 relative w-full    ">
                      <div class="mb-3 pt-0 relative">
                         <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1 mt-2">Your message</label>
                         <div class="mb-3 pt-0"><textarea placeholder="Your message" 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="w-full text-center md:text-right mt-2"><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-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Send Message</button></div>
             </div>
          </div>
          <div class="relative w-full lg:w-4/12 md:w-5/12">
             <div class="bg-lightBlue-500 text-lightBlue-500 text-left h-full w-full flex items-center justify-center rounded-r-none rounded-b md:rounded-b-none md:rounded-r">
                <div class="p-6">
                   <h4 class="text-2xl font-bold leading-tight text-center text-white">Other contact details</h4>
                   <p class="mt-1 text-white opacity-75 text-lg text-center">Come and visit us</p>
                   <div class="text-left w-full my-6 items-center flex items-center">
                      <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-map-marker-alt"></i></div>
                      <p class="ml-3 text-white">5th Avenue, New York</p>
                   </div>
                   <div class="text-left w-full my-6 items-center flex items-center">
                      <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-phone"></i></div>
                      <p class="ml-3 text-white">+40 (312) 563 241</p>
                   </div>
                   <div class="text-left w-full my-6 items-center flex items-center">
                      <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-envelope"></i></div>
                      <p class="ml-3 text-white">[email protected]</p>
                   </div>
                   <div class="text-left w-full my-6 items-center flex items-center">
                      <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-headphones"></i></div>
                      <p class="ml-3 text-white">[email protected]</p>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>