Cards

<div class="w-full md:w-1/2 lg:w-1/4">
  <div class="relative flex flex-col min-w-0 break-words bg-white rounded-lg mb-6 xl:mb-0 shadow-lg">
    <div class="flex-auto p-4">
      <div class="flex flex-wrap">
        <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
          <h5 class="text-blueGray-400 uppercase font-bold text-xs">Traffic</h5>
          <span class="font-bold text-xl">350,897</span>
        </div>
        <div class="relative w-auto pl-4 flex-initial">
          <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-red-500"><i class="far fa-chart-bar"></i></div>
        </div>
      </div>
      <p class="text-sm text-blueGray-500 mt-4"><span class="text-emerald-500 mr-2"><i class="fas fa-arrow-up"></i> 3.48%</span><span class="whitespace-nowrap">Since last month</span></p>
    </div>
  </div>
</div>

<div class="w-full md:w-10/12">
  <div class="relative flex flex-col w-full mb-6 shadow-lg rounded-lg bg-white">
    <div class="mb-0 p-6 pb-0">
      <div class="text-center flex justify-between items-center">
        <h6 class="text-xl font-bold mb-0">Account Settings</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-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">Save change</button>
      </div>
    </div>
    <div class="flex-auto px-6 pb-6 pt-0">
      <form>
        <div>
          <h6 class="mt-6 mb-2 font-bold">Profile Details</h6>
          <hr class="mb-6 border-b-1 border-blueGray-200">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full px-4 lg:w-6/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">Username</label>
                <div class="mb-3 pt-0"><input placeholder="Username" 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 " value="lucky.jesse"></div>
              </div>
            </div>
            <div class="w-full px-4 lg:w-6/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">Email Address</label>
                <div class="mb-3 pt-0"><input placeholder="Email" 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 " value="[email protected]"></div>
              </div>
            </div>
            <div class="w-full px-4 lg:w-6/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">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 " value="Lucky"></div>
              </div>
            </div>
            <div class="w-full px-4 lg:w-6/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">Last Name</label>
                <div class="mb-3 pt-0"><input placeholder="Last 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 " value="Jesse"></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <h6 class="mt-6 mb-2 font-bold">Contact Information</h6>
          <hr class="mb-6 border-b-1 border-blueGray-200">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full px-4 lg:w-12/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">Address</label>
                <div class="mb-3 pt-0"><input placeholder="Address" 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 " value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"></div>
              </div>
            </div>
            <div class="w-full px-4 lg:w-4/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">City</label>
                <div class="mb-3 pt-0"><input placeholder="City" 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 " value="New York"></div>
              </div>
            </div>
            <div class="w-full px-4 lg:w-4/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">Country</label>
                <div class="mb-3 pt-0"><input placeholder="Country" 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 " value="United States"></div>
              </div>
            </div>
            <div class="w-full px-4 lg:w-4/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">Postal Code</label>
                <div class="mb-3 pt-0"><input placeholder="Postal Code" 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 " value="44444444"></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <h6 class="mt-6 mb-2 font-bold">About me</h6>
          <hr class="mb-6 border-b-1 border-blueGray-200">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full px-4 lg:w-12/12">
              <div class="relative w-full mb-3">
                <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1" for="grid-password">About me</label>
                <div class="mb-3 pt-0"><textarea placeholder="About me" rows="4" 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 ">A beautiful Dashboard for HTML &amp; Tailwind CSS.</textarea></div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="w-full md:w-3/4 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 mt-16">
    <div class="px-6">
      <div class="flex flex-wrap justify-center">
        <div class="w-full flex justify-center">
          <div class="relative"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.jpg" class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"></div>
        </div>
        <div class="w-fulltext-center mt-20">
          <div class="flex justify-center lg:pt-4 pt-8 pb-0">
            <div class="p-3 text-center"><span class="text-xl font-bold block uppercase tracking-wide text-blueGray-700">138</span><span class="text-sm text-blueGray-400">Projects</span></div>
            <div class="p-3 text-center"><span class="text-xl font-bold block uppercase tracking-wide text-blueGray-700">3,660</span><span class="text-sm text-blueGray-400">Tasks</span></div>
            <div class="p-3 text-center"><span class="text-xl font-bold block uppercase tracking-wide text-blueGray-700">35+</span><span class="text-sm text-blueGray-400">Team Size</span></div>
          </div>
        </div>
      </div>
      <div class="text-center mt-2">
        <h3 class="text-xl font-bold leading-normal mb-2">Jenna Stones</h3>
        <div class="text-xs mt-0 mb-2 text-blueGray-400 font-bold uppercase"><i class="fas fa-map-marker-alt mr-2 text-blueGray-400 opacity-75"></i>New York, USA</div>
      </div>
      <div class="mt-6 py-6 border-t border-blueGray-200 text-center">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-4">
            <p class="font-light leading-relaxed mb-4">An artist of considerable range, Jenna the name taken by Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and records all of his own music, giving it a warm.</p>
            <a href="javascript:;" class="font-normal text-lightBlue-500 hover:text-lightBlue-600">Show more</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="w-full">
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-white text-blueGray-700">
    <div class="px-6 py-4 border-0">
      <div class="flex flex-wrap items-center">
        <div class="relative w-full max-w-full flex-grow flex-1">
          <h3 class="font-bold text-lg text-blueGray-700">Card Tables</h3>
        </div>
      </div>
    </div>
    <div class="block w-full overflow-x-auto">
      <table class="items-center w-full bg-transparent border-collapse">
        <thead>
          <tr>
            <th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-bold text-left bg-blueGray-100 text-blueGray-500 border-blueGray-200">Project</th>
            <th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-bold text-left bg-blueGray-100 text-blueGray-500 border-blueGray-200">Budget</th>
            <th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-bold text-left bg-blueGray-100 text-blueGray-500 border-blueGray-200">Status</th>
            <th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-bold text-left bg-blueGray-100 text-blueGray-500 border-blueGray-200">Users</th>
            <th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-bold text-left bg-blueGray-100 text-blueGray-500 border-blueGray-200">Completion</th>
            <th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-bold text-left bg-blueGray-100 text-blueGray-500 border-blueGray-200"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/bootstrap.bd712487.jpg" class="h-12 w-12 bg-white rounded-full border p-1" alt="..."> <span class="ml-3 font-bold NaN">Argon Design System</span></div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">$2,500 USD</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><i class="fas fa-circle mr-2 text-orange-500"></i>pending</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">
                <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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.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">Team 1</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.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">Team 2</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3-800x800.19201574.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">Team 3</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4-470x470.4ef82ef4.png">
                      <div class="hidden " data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(688px, 1518px);" data-popper-escaped="">
                        <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">Team 4</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <small class="pl-2 font-bold mb-1"></small>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 min-w-140-px">
              <div class="flex items-center">
                <span class="mr-2">60%</span>
                <div class="relative w-full">
                  <div class="overflow-hidden h-2 text-xs flex rounded bg-red-200">
                    <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" style="width: 60%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pb-6 pl-6 text-right">
              <div class="relative">
                <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"><i class="fas fa-cog"></i><i class="ml-2 fas fa-caret-down transition-all duration-100 ease-in-out transform "></i></button>
                <div class="block  z-50">
                  <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in transform opacity-0 scale-95 absolute "><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Edit Profile</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Settings</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Log out</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/angular.b5045666.jpg" class="h-12 w-12 bg-white rounded-full border p-1" alt="..."> <span class="ml-3 font-bold NaN">Angular Now UI Kit PRO</span></div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">$1,800 USD</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><i class="fas fa-circle mr-2 text-emerald-500"></i>completed</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">
                <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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.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">Team 1</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.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">Team 2</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3-800x800.19201574.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">Team 3</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4-470x470.4ef82ef4.png">
                      <div class="hidden " data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(688px, 1518px);" data-popper-escaped="">
                        <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">Team 4</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <small class="pl-2 font-bold mb-1"></small>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 min-w-140-px">
              <div class="flex items-center">
                <span class="mr-2">100%</span>
                <div class="relative w-full">
                  <div class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200">
                    <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" style="width: 100%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pb-6 pl-6 text-right">
              <div class="relative">
                <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"><i class="fas fa-cog"></i><i class="ml-2 fas fa-caret-down transition-all duration-100 ease-in-out transform "></i></button>
                <div class="block  z-50">
                  <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in transform opacity-0 scale-95 absolute "><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Edit Profile</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Settings</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Log out</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/sketch.a6af780a.jpg" class="h-12 w-12 bg-white rounded-full border p-1" alt="..."> <span class="ml-3 font-bold NaN">Black Dashboard Sketch</span></div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">$3,150 USD</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><i class="fas fa-circle mr-2 text-red-500"></i>delayed</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">
                <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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.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">Team 1</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.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">Team 2</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3-800x800.19201574.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">Team 3</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4-470x470.4ef82ef4.png">
                      <div class="hidden " data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(688px, 1518px);" data-popper-escaped="">
                        <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">Team 4</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <small class="pl-2 font-bold mb-1"></small>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 min-w-140-px">
              <div class="flex items-center">
                <span class="mr-2">73%</span>
                <div class="relative w-full">
                  <div class="overflow-hidden h-2 text-xs flex rounded bg-red-200">
                    <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" style="width: 73%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pb-6 pl-6 text-right">
              <div class="relative">
                <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"><i class="fas fa-cog"></i><i class="ml-2 fas fa-caret-down transition-all duration-100 ease-in-out transform "></i></button>
                <div class="block  z-50">
                  <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in transform opacity-0 scale-95 absolute "><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Edit Profile</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Settings</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Log out</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/react.0e8c9066.jpg" class="h-12 w-12 bg-white rounded-full border p-1" alt="..."> <span class="ml-3 font-bold NaN">Material Dashboard</span></div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">$4,400 USD</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><i class="fas fa-circle mr-2 text-red-500"></i>delayed</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">
                <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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.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">Team 1</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.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">Team 2</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3-800x800.19201574.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">Team 3</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4-470x470.4ef82ef4.png">
                      <div class="hidden " data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(688px, 1518px);" data-popper-escaped="">
                        <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">Team 4</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <small class="pl-2 font-bold mb-1"></small>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 min-w-140-px">
              <div class="flex items-center">
                <span class="mr-2">90%</span>
                <div class="relative w-full">
                  <div class="overflow-hidden h-2 text-xs flex rounded bg-teal-200">
                    <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" style="width: 90%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pb-6 pl-6 text-right">
              <div class="relative">
                <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"><i class="fas fa-cog"></i><i class="ml-2 fas fa-caret-down transition-all duration-100 ease-in-out transform "></i></button>
                <div class="block  z-50">
                  <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in transform opacity-0 scale-95 absolute "><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Edit Profile</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Settings</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Log out</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/vue.43bd93a8.jpg" class="h-12 w-12 bg-white rounded-full border p-1" alt="..."> <span class="ml-3 font-bold NaN">Vue Material Dashboard</span></div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">$2,200 USD</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center"><i class="fas fa-circle mr-2 text-emerald-500"></i>completed</div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
              <div class="flex items-center">
                <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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.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">Team 1</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.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">Team 2</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3-800x800.19201574.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">Team 3</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-8 h-8" href="javascript:;">
                      <img alt="..." class="rounded-full w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4-470x470.4ef82ef4.png">
                      <div class="hidden " data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(688px, 1518px);" data-popper-escaped="">
                        <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">Team 4</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <small class="pl-2 font-bold mb-1"></small>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 min-w-140-px">
              <div class="flex items-center">
                <span class="mr-2">100%</span>
                <div class="relative w-full">
                  <div class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200">
                    <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" style="width: 100%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pb-6 pl-6 text-right">
              <div class="relative">
                <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"><i class="fas fa-cog"></i><i class="ml-2 fas fa-caret-down transition-all duration-100 ease-in-out transform "></i></button>
                <div class="block  z-50">
                  <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in transform opacity-0 scale-95 absolute "><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Edit Profile</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Settings</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Log out</a></div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="w-full">
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-indigo-900">
    <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
      <div class="flex flex-wrap items-center">
        <div class="relative w-full max-w-full flex-grow flex-1">
          <h6 class="uppercase mb-1 text-xs font-semibold text-blueGray-200">Overview</h6>
          <h2 class="text-xl font-semibold text-white">Sales value</h2>
        </div>
      </div>
    </div>
    <div class="p-4 flex-auto">
      <div class="relative h-350-px">
        <canvas width="738" height="218" id="line-chart"></canvas>
      </div>
    </div>
  </div>
</div>