Notus Design System PRO by Creative Tim

Teams 1

Copied

Diamond team

For the people who are with us

The guys from Notus PRO React, and those that are abroad, for making a better life and better money. We're here from north, south, east, west.

John Darwin

Web Designer

Skill

Leadership

Hobbies

Skiing, Chess

Lucy Klein

CTO

Skill

Painting

Hobbies

Skiing, Chess

Level

• • • • •

Tony Mark

Brand Strategist

Skill

Management

Hobbies

Walking, Dancing

<div class="w-full">
    <div class="py-20">
       <div class="container mx-auto px-4">
          <div class="mb-12 flex flex-wrap -mx-4 justify-center">
             <div class="px-4 relative w-full lg:w-8/12 text-center">
                <h6 class="mb-2 text-lg font-bold uppercase text-lightBlue-500">Diamond team</h6>
                <h2 class="text-4xl font-bold mt-0 mb-1 text-blueGray-700">For the people who are with us</h2>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">The guys from Notus PRO React, and those that are abroad, for making a better life and better money. We're here from north, south, east, west.</p>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4 items-center">
             <div class="mx-auto px-4 relative w-full md:w-5/12 lg:w-4/12">
                <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>
             <div class="mx-auto px-4 relative w-full md:w-5/12 lg:w-4/12">
                <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/lucy.49f7b995.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">Lucy Klein</h3>
                         <p class="text-lg font-normal leading-normal mb-4 text-blueGray-400">CTO</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>Painting</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 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-smile-beam"></i></span><span class="text-blueGray-500 uppercase text-sm font-bold">Level</span></div>
                                  <span>• • • • •</span>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
             <div class="mx-auto px-4 relative w-full md:w-5/12 lg:w-4/12">
                <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/face-5.290afc74.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">Tony Mark</h3>
                         <p class="text-lg font-normal leading-normal mb-4 text-blueGray-400">Brand Strategist</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>Management</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>Walking, Dancing</span>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

Teams 2

Copied

You need trust

North, south, east, west

I do not trust anyone, it is better this way. You shouldn't trust anyone that does not trust you. Believe me, when I say, you can always who is false and who is true.

NameTony Mark

PositionProject Manager

2,367Followers

247Projects

1,189Commits

Team

<div class="w-full">
    <div class="py-20">
       <div class="container mx-auto px-4">
          <div class="flex flex-wrap -mx-4 justify-center">
             <div class="px-4 relative w-full text-center">
                <span class="text-pink-500 bg-pink-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">You need trust</span>
                <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">North, south, east, west</h2>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">I do not trust anyone, it is better this way. You shouldn't trust anyone that does not trust you. Believe me, when I say, you can always who is false and who is true.</p>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4">
             <div class="mx-auto px-4 relative w-full lg:w-10/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>
          </div>
       </div>
    </div>
 </div>

Teams 3

Copied

Special team

Trumpets should start singing

You tell people not to listen to hip-hop, but it is vain. This is reality, you should remember this. It is better to make rhymes than crimes.

5,390Followers

560Photos

890Projects

Melanie Tompson

Beijing, China

Christian Paisley

New York, USA

7,800Finished Rides

4.9/5Stars

22Friends

10Photos

89Comments

Johana Doe, 29

California

<div class="w-full">
    <div class="my-20">
       <div class="container mx-auto px-4">
          <div class="mb-12 flex flex-wrap -mx-4 justify-center">
             <div class="px-4 relative w-full lg:w-8/12 text-center">
                <h6 class="mb-2 font-bold uppercase text-emerald-500">Special team</h6>
                <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">Trumpets should start singing</h3>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">You tell people not to listen to hip-hop, but it is vain. This is reality, you should remember this. It is better to make rhymes than crimes.</p>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4">
             <div class="px-4 relative w-full md:w-6/12 lg:w-4/12 my-4">
                <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>
             <div class="px-4 relative w-full md:w-6/12 lg:w-4/12 my-4 mt-12">
                <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>
             <div class="px-4 relative w-full md:w-6/12 lg:w-4/12 my-4">
                <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/p7.svg');">
                      <div class="flex justify-center"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3.c5d0c11c.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">22</span><span class="text-blueGray-400">Friends</span></div>
                               <div class="text-center mr-4 p-4"><span class="font-bold text-xl block">10</span><span class="text-blueGray-400">Photos</span></div>
                               <div class="text-center mr-4 p-4"><span class="font-bold text-xl block">89</span><span class="text-blueGray-400">Comments</span></div>
                            </div>
                         </div>
                      </div>
                      <div class="text-center">
                         <h3 class="text-2xl font-bold leading-tight mt-0 mb-1">Johana Doe, 29</h3>
                         <p class="text-lg text-blueGray-400">California</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

PresentationSections

Teams

Teams 1

Diamond team

For the people who are with us

John Darwin

Lucy Klein

Tony Mark

Teams 2

North, south, east, west

Teams 3

Special team

Trumpets should start singing

Melanie Tompson

Christian Paisley

Johana Doe, 29