Notus Design System PRO by Creative Tim

Card Profile Full Page

Copied

22Friends

10Photos

89Comments

Jenna Stones

Los Angeles, California

Solution Manager - Creative Tim Officer

University of Computer Science

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, intimate feel with a solid groove structure. An artist of considerable range.

 <div class="w-full mt-16">
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg">
       <div class="px-6">
          <div class="flex flex-wrap justify-center">
             <div class="w-full lg:w-3/12 px-4 lg:order-2 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-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
                <div class="py-6 px-3 mt-32 sm:mt-0"><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">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>
             <div class="w-full lg:w-4/12 px-4 lg:order-1">
                <div class="flex justify-center py-4 lg:pt-4 pt-8">
                   <div class="mr-4 p-3 text-center"><span class="text-xl font-bold block tracking-wide text-blueGray-700">22</span><span class="text-sm text-blueGray-500">Friends</span></div>
                   <div class="mr-4 p-3 text-center"><span class="text-xl font-bold block tracking-wide text-blueGray-700">10</span><span class="text-sm text-blueGray-500">Photos</span></div>
                   <div class="mr-4 p-3 text-center"><span class="text-xl font-bold block tracking-wide text-blueGray-700">89</span><span class="text-sm text-blueGray-500">Comments</span></div>
                </div>
             </div>
          </div>
          <div class="text-center mt-12">
             <h3 class="text-4xl font-bold leading-tight mb-2 mb-0">Jenna Stones</h3>
             <div class="text-sm leading-normal mt-0 mb-2 text-blueGray-500 font-bold uppercase"><i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-500"></i>Los Angeles, California</div>
             <div class="mb-2 text-blueGray-700 mt-10">
                <p class="mb-2 text-blueGray-700"><i class="fas fa-briefcase mr-2 text-lg text-blueGray-500"></i>Solution Manager - Creative Tim Officer</p>
                <p class="mb-2 text-blueGray-700"><i class="fas fa-university mr-2 text-lg text-blueGray-500"></i>University of Computer Science</p>
             </div>
          </div>
          <div class="mt-10 py-10 border-t border-blueGray-300 text-center">
             <div class="flex flex-wrap justify-center">
                <div class="w-full lg:w-9/12 px-4">
                   <p class="mb-4 text-lg leading-relaxed text-blueGray-800">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, intimate feel with a solid groove structure. An artist of considerable range.</p>
                   <a href="javascript:;" class="font-normal text-lightBlue-500 hover:text-lightBlue-600">Show more</a>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

Card Product Price

Copied

Gucci Blazer

This Gucci blazer has been crafted in Italy from hard-wearing black textured-leather

€1,990

<div class="w-full md:w-1/4">
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
       <div class="px-6"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-2.366b1564.jpg" class="w-full"></div>
       <div class="px-6 py-6 flex-auto">
          <h6 class="text-sm font-bold uppercase mt-0 mb-1 text-pink-500">Trending</h6>
          <h5 class="text-2xl font-semibold mt-0 mb-2">Gucci Blazer</h5>
          <p class="text-blueGray-500 leading-relaxed">This Gucci blazer has been crafted in Italy from hard-wearing black textured-leather</p>
          <div class="flex justify-between mt-2"><span class="text-blueGray-700 text-xl mt-1">€1,990</span><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-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fas fa-heart"></i></button></div>
       </div>
    </div>
 </div>

Card Pricing List

Copied

Freelancer Package

$249

Lifetime Access

Complete documentation
Working materials in Sketch
Unlimited cloud storage

More details...

<div class="w-full md:w-1/3">
    <div class="shadow-lg rounded-lg text-center text-blueGray-500 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 bg-blueGray-800">
       <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-700">
          <h4 class="font-bold uppercase my-2 text-white">Freelancer Package</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">$249</div>
          <span class="text-lg text-white opacity-50">Lifetime Access</span>
          <ul class="mt-8 mb-8 list-none">
             <li class="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-blueGray-500 bg-blueGray-200"><i class="fas fa-folder-open"></i></span>
                   <h6 class="text-lg text-white opacity-75">Complete documentation</h6>
                </div>
             </li>
             <li class="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-blueGray-500 bg-blueGray-200"><i class="fab fa-sketch"></i></span>
                   <h6 class="text-lg text-white opacity-75">Working materials in Sketch</h6>
                </div>
             </li>
             <li class="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-blueGray-500 bg-blueGray-200"><i class="fas fa-archive"></i></span>
                   <h6 class="text-lg text-white opacity-75">Unlimited cloud storage</h6>
                </div>
             </li>
          </ul>
          <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Buy Now</button>
       </div>
       <div class="bg-transparent mt-2 py-6 bg-transparent rounded-b px-4 py-3 border-t border-blueGray-700"><a class="text-blueGray-500" href="javascript:;">More details...</a></div>
    </div>
 </div>

Card Table Details

Copied

Enterprise Offer

What colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.

24/7 Support	Design Tools
10.000 emails	Private Brand

Contact Us

<div class="w-full md:w-1/2">
    <div class="bg-white text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-300">
          <h4 class="pt-2 text-2xl font-bold mt-0 mb-2 text-lightBlue-500">Enterprise Offer</h4>
       </div>
       <div class="lg:px-12 px-4 py-5 flex-auto">
          <div class="leading-relaxed text-blueGray-500">What colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.</div>
          <table class="mt-6 w-full mb-4 text-blueGray-700 border-collapse border border-solid border-blueGray-200">
             <tbody>
                <tr>
                   <td class="text-center p-3 border-t border">24/7 Support</td>
                   <td class="text-center p-3 border-t border">Design Tools</td>
                </tr>
                <tr>
                   <td class="text-center p-3 border-t border">10.000 emails</td>
                   <td class="text-center p-3 border-t border">Private Brand</td>
                </tr>
             </tbody>
          </table>
       </div>
       <div class="bg-transparent mt-4 py-6 bg-transparent rounded-b px-4 py-3 border-t border-blueGray-300"><a class="text-lightBlue-500" href="javascript:;">Contact Us</a></div>
    </div>
 </div>

Card Info Icon Bg

Copied

Message from team

If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try.

More details...

<div class="w-full md:w-1/4 mt-8">
    <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
       <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-lightBlue-500 text-white"><i class="fas fa-heart block mx-auto text-xl"></i></div>
       <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
          <h4 class="text-2xl font-bold mt-0 mb-2">Message from team</h4>
          <p class="text-blueGray-500 leading-relaxed">If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try.</p>
          <div class="text-lightBlue-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">More details...</a></div>
       </div>
    </div>
 </div>

Card Invoice

Copied

St. Independence Embankment, 050105 Bucharest, Romania

tel: +4 (074) 1090873

Billed to:

James Thompson

Bld Mihail Kogalniceanu, 7652 Bucharest, Romania

Invoice no

#0453119

Invoice date:

06/03/2021

Due date:

11/03/2021

Item	Qty	Rate	Amount
Premium Support	1	$9.00	$9.00
Notus Design System PRO	2	$150.00	$300.00
Parts for service	1	$89.00	$89.00
Total	$750

Thank you!

If you encounter any issues can contact us

email:[email protected]

<div class="w-full">
    <div class="bg-white shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg">
       <div class="px-5 pt-6 pb-4 border-b border-blueGray-200">
          <div class="justify-between flex flex-wrap -mx-4">
             <div class="text-left px-4 relative w-full md:w-4/12">
                <div class="text-left">
                   <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/ct-logo-text-black.3f86d99c.png" class="w-full mb-2" style="max-width: 150px;">
                   <h6 class="block capitalize text-blueGray-700 mt-6">St. Independence Embankment, 050105 Bucharest, Romania</h6>
                   <h6 class="text-blueGray-700">tel: +4 (074) 1090873</h6>
                </div>
             </div>
             <div class="text-left px-4 relative w-full lg:w-3/12 w-full md:w-5/12">
                <div class="flex justify-center py-6 lg:pt-6 pt-12">
                   <div class="text-left">
                      <h3 class="text-2xl font-bold leading-normal mt-0 mb-2">Billed to:</h3>
                      <h6 class="block mt-2 mb-0 text-xl">James Thompson</h6>
                      <p class="text-blueGray-500">Bld Mihail Kogalniceanu, 7652 Bucharest, Romania</p>
                   </div>
                </div>
             </div>
          </div>
          <div class="md:justify-between flex flex-wrap -mx-4">
             <div class="text-left px-4 relative w-full md:w-4/12">
                <h4 class="text-2xl font-semibold leading-normal mb-2 mt-12 text-left">Invoice no</h4>
                <h3 class="text-2xl font-normal leading-normal mt-1 mb-2 font-light">#0453119</h3>
             </div>
             <div class="text-left px-4 relative w-full lg:w-3/12 w-full md:w-5/12">
                <div class="flex justify-center py-6 lg:pt-4">
                   <div class="mt-12">
                      <p class="float-left mb-0">Invoice date:</p>
                      <p class="ml-4 float-right mb-0">06/03/2021</p>
                      <br>
                      <p class="float-left">Due date:</p>
                      <p class="ml-4 float-right">11/03/2021</p>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="px-4 py-5 flex-auto">
          <table class="text-right w-full mb-4 text-blueGray-800 border-collapse">
             <thead class="bg-blueGray-800">
                <tr class="text-right text-white uppercase font-light">
                   <th class="p-3 border-t" scope="col">Item</th>
                   <th class="p-3 border-t" scope="col">Qty</th>
                   <th class="p-3 border-t" scope="col">Rate</th>
                   <th class="p-3 border-t" scope="col">Amount</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td class="py-4 p-3 border-t">Premium Support</td>
                   <td class="py-4 p-3 border-t">1</td>
                   <td class="py-4 p-3 border-t">$9.00</td>
                   <td class="py-4 p-3 border-t">$9.00</td>
                </tr>
                <tr>
                   <td class="py-4 p-3 border-t">Notus Design System PRO</td>
                   <td class="py-4 p-3 border-t">2</td>
                   <td class="py-4 p-3 border-t">$150.00</td>
                   <td class="py-4 p-3 border-t">$300.00</td>
                </tr>
                <tr>
                   <td class="py-4 p-3 border-t">Parts for service</td>
                   <td class="py-4 p-3 border-t">1</td>
                   <td class="py-4 p-3 border-t">$89.00</td>
                   <td class="py-4 p-3 border-t">$89.00</td>
                </tr>
             </tbody>
             <tfoot>
                <tr class="mt-4">
                   <th class="border-b-0 p-3 border-t">
                      <p class="text-lg font-semibold pt-2">Total</p>
                   </th>
                   <th class="border-b-0 p-3 border-t" colspan="3">
                      <p class="text-right text-lg font-semibold pt-2">$750</p>
                   </th>
                </tr>
             </tfoot>
          </table>
       </div>
       <div class="px-4 py-3 border-t border-blueGray-200">
          <div class="text-right ml-auto px-4 relative w-full md:w-5/12">
             <h5 class="text-2xl font-semibold leading-normal mt-0 mb-2">Thank you!</h5>
             <p class="">If you encounter any issues can contact us</p>
             <h6 class="flex items-center justify-end mb-4"><span class="mr-2">email:</span><span class="text-blueGray-500">[email protected]</span></h6>
          </div>
       </div>
    </div>
 </div>

Card Product Text

Copied

Wearing

Check our latest collection

Yesterday, this was an essential fabric and its news reader app Paper. It is design-focused wool called out...

<div class="w-full md:w-1/4">
    <div class="shadow-lg rounded-lg overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
       <div class="p-6"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-1.986b18bf.jpg" class="w-full"></div>
       <div class="px-6 pb-6 flex-auto">
          <h6 class="text-red-500 font-bold uppercase text-sm mb-2"><i class="fas fa-calendar-check mr-1 opacity-75"></i> Wearing</h6>
          <h4 class="text-2xl font-semibold leading-tight mt-0 mb-2 my-4"><a href="javascript:;" class="">Check our latest collection</a></h4>
          <p class="text-blueGray-500 leading-relaxed">Yesterday, this was an essential fabric and its news reader app Paper. It is design-focused wool called out...</p>
       </div>
    </div>
 </div>

Card Product Plain

Copied

new collection

Burberry

$2.300

<div class="w-full md:w-1/4">
    <div class="relative flex flex-col min-w-0 break-words w-full bg-transparent">
       <div>
          <div class="h-8 text-center"><span class="text-teal-500 bg-teal-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">new collection</span></div>
          <img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/tshirt5.d8f53d72.jpg" class="w-full p-6">
       </div>
       <div class="p-6 flex-auto text-center">
          <h5 class="text-2xl font-bold mt-0"><a href="javascript:;" class="">Burberry</a></h5>
          <span class="text-blueGray-700 text-lg">$2.300</span>
       </div>
    </div>
 </div>

Card Products Checkout

Copied

Shorts

Small

$290

Jacket

Medium

$1.000

Discount

Subtotal

$1.290

Shipping

$200

Total

$1.490

<div class="w-full md:w-1/3">
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
       <div class="px-4 py-5 flex-auto">
          <div class="items-center my-4 flex items-start">
             <img src="https://demos.creative-tim.com/notus-pro-react/static/media/gucci.df54712f.png" class="mr-4 w-20 p-2" alt="...">
             <div class="flex-1">
                <div class="justify-between">
                   <h6 class="text-xl font-semibold leading-tight mb-1">Shorts</h6>
                   <p class="text-blueGray-500 uppercase font-bold text-xs">Small</p>
                </div>
             </div>
             <span class="text-blueGray-700">$290</span>
          </div>
          <div class="items-center my-4 flex items-start">
             <img src="https://demos.creative-tim.com/notus-pro-react/static/media/jacket.132b3c72.png" class="mr-4 w-20 p-2" alt="...">
             <div class="flex-1">
                <div class="justify-between">
                   <h6 class="text-xl font-semibold leading-tight mb-1">Jacket</h6>
                   <p class="text-blueGray-500 uppercase font-bold text-xs">Medium</p>
                </div>
             </div>
             <span class="text-blueGray-700">$1.000</span>
          </div>
          <hr class="mt-6 mb-4 bg-blueGray-300 ml-0">
          <div class="mb-0 pt-0 relative">
             <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Discount</label>
             <div class="mb-2 relative flex flex-wrap w-full items-stretch">
                <div class="mr-2">
                   <div class="mb-3 pt-0"><input placeholder="Discount 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 "></div>
                </div>
                <div class="mb-0"><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-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Apply</button></div>
             </div>
          </div>
          <div>
             <hr class="mt-4 mb-2 bg-blueGray-300 ml-0">
             <div class="flex justify-between">
                <h6 class="text-blueGray-700 leading-normal mt-0 mb-2">Subtotal</h6>
                <h6 class="leading-normal mt-0 mb-2">$1.290</h6>
             </div>
             <div class="flex justify-between">
                <h6 class="text-blueGray-700 leading-normal mt-0 mb-2">Shipping</h6>
                <h6 class="leading-normal mt-0 mb-2">$200</h6>
             </div>
          </div>
          <div>
             <hr class="mt-4 mb-2 bg-blueGray-300 ml-0">
             <div class="flex justify-between">
                <h6 class="text-blueGray-700 leading-normal mt-0 mb-2">Total</h6>
                <h6 class="leading-normal mt-0 mb-2">$1.490</h6>
             </div>
          </div>
       </div>
    </div>
 </div>

Card Billing

Copied

Billing address

First name*

Last name*

Email address*

Phone*

Street address*

Postcode/Zip*

Apt, suite, etc.

City*

Payment method

Card Number

Card holder

Expiration

CVC

<div class="container mx-auto px-4">
    <h3 class="text-3xl font-semibold mt-4 mb-6">Billing address</h3>
    <div class="flex flex-wrap -mx-4">
       <div class="px-4 pb-2 relative w-full lg:w-6/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">First name*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. Smith" type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
       </div>
       <div class="px-4 pb-2 relative w-full lg:w-6/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Last name*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. John" 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 class="px-4 pb-2 relative w-full lg:w-6/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email address*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. [email protected]" 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 class="px-4 pb-2 relative w-full lg:w-6/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Phone*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. +1 (5417) 543 010" 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 class="px-4 pb-2 relative w-full lg:w-8/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Street address*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. 420 Long Beach, CA" 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 class="px-4 pb-2 relative w-full lg:w-4/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Postcode/Zip*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. 340112" 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 class="px-4 pb-2 relative w-full lg:w-4/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Apt, suite, etc.</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. YC7B 3UT" 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 class="px-4 pb-2 relative w-full lg:w-4/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">City*</label>
          <div class="mb-3 pt-0"><input placeholder="E.g. London" 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 class="px-4 pb-2 relative w-full lg:w-4/12">
          <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Country*</label>
          <div class="relative">
             <div class="mb-3 pt-0"><input placeholder="Select 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=""></div>
             <div class="hidden z-50">
                <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Czech Republic</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Denmark</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Dominican Republic</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Iraq</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Israel</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Italy</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Jamaica</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Japan</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Madagascar</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Malta</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Norway</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Poland</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Portugal</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Romania</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Russian Federation</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Saint Lucia</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Samoa</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">San Marino</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Saudi Arabia</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Select country</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Spain</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Swaziland</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Sweden</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Turkey</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Uganda</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Ukraine</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">United Arab Emirates</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">United Kingdom</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">United States</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Viet Nam</a></div>
             </div>
          </div>
       </div>
    </div>
    <h3 class="text-3xl font-semibold mt-4 mb-6">Payment method</h3>
    <ul class="flex-col md:flex-row flex flex-wrap list-none pl-0 mb-0">
       <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"><a href="javascript:;" class="text-xs font-bold uppercase px-5 py-3 shadow rounded block leading-normal sm:mb-4 md:mb-0 uppercase duration-500 transition-all ease-in-out bg-pink-500 text-white">Credit Card</a></li>
       <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"><a href="javascript:;" class="text-xs font-bold uppercase px-5 py-3 shadow rounded block leading-normal sm:mb-4 md:mb-0 uppercase duration-500 transition-all ease-in-out text-pink-500 bg-white">PayPal</a></li>
    </ul>
    <div class="w-full">
       <div class="my-8 transform duration-500 transition-all ease-in-out block">
          <div class="flex flex-wrap -mx-4">
             <div class="px-4 relative w-full lg:w-12/12">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Card Number</label>
                <div class="mb-3 pt-0"><input inputmode="numeric" pattern="[0-9s]{13,19}" maxlength="19" placeholder="E.g. 1234 1234 1234 1234" type="tel" 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 class="px-4 relative w-full lg:w-7/12">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Card holder</label>
                <div class="mb-3 pt-0"><input placeholder="E.g. SMITH JOHN" 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 class="px-4 relative w-full lg:w-3/12">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Expiration</label>
                <div class="mb-3 pt-0"><input placeholder="E.g. 01/24" 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 class="px-4 relative w-full lg:w-2/12">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">CVC</label>
                <div class="mb-3 pt-0"><input placeholder="E.g. 123" 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>
       <div class="my-8 transform duration-500 transition-all ease-in-out hidden">
          <div class="flex flex-wrap -mx-4">
             <div class="px-4 relative w-full lg:w-12/12">
                <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label>
                <div class="mb-3 pt-0"><input placeholder="E.g. [email protected]" 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>
    <div class="flex justify-between mt-12 mb-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-blueGray-800 bg-blueGray-200 border-blueGray-200 active:bg-blueGray-300 active:border-blueGray-300 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Return to cart</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-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Order now</button></div>
 </div>

Copied

Sandra Bailey

Profile completion

80%

General Information

First Name

Last Name

I'm

Birth Date

Email

Confirm Email

Your Location

Phone Number

Language

Billing Method

Card Type	Card Number	Payment Method	Action
	•••• •••• •••• 8372
	•••• •••• •••• 1225

<div class="w-full">
   <div class="bg-white mb-0 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
      <div class="w-full px-4 mx-auto px-4">
         <div class="flex flex-wrap -mx-4">
            <div class="px-4 relative w-full md:w-3/12">
               <div class="relative py-12">
                  <section class="text-center block">
                     <div class="text-center">
                        <input class="hidden" type="file">
                        <div class="rounded-full mx-auto shadow-lg rounded max-w-100-px mb-4"><img class="rounded-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" alt="..."></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-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">change</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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">remove</button></div>
                     </div>
                     <h3 class="text-3xl font-semibold mt-2 mb-4">Sandra Bailey</h3>
                  </section>
                  <section class="block">
                     <ul class="flex-col flex flex-wrap list-none pl-0 mb-0">
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-pink-500 hover:text-pink-700" href="javascript:;">General</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Billing</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Security</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Notifications</a></li>
                     </ul>
                  </section>
                  <div class="mt-4">
                     <div class="relative w-full">
                        <div class="flex mb-2 items-center justify-between">
                           <div><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-full px-3">Profile completion</span></div>
                           <div class="text-right"><span class="text-xs font-semibold inline-block text-pink-500">80%</span></div>
                        </div>
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-pink-200">
                           <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" style="width: 80%;"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="ml-auto px-4 relative w-full md:w-8/12">
               <div class="relative py-12">
                  <div class="my-8 duration-500 transition-all ease-in-out block">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">General Information</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">First Name</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="First Name" 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="Charlie"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Last Name</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Last Name" 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="Bailey"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">I'm</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Gender" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Female</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Male</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Birth Date</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Month" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">January</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">February</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">March</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">April</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">May</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">June</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">July</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">August</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">September</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">October</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">November</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">December</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Day" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">01</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">02</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">03</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">04</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">05</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">06</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">07</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">08</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">09</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">10</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">11</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">12</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">13</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">14</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">15</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">16</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">17</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">18</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">19</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">20</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">21</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">22</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">23</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">24</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">25</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">26</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">27</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">28</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">29</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">30</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">31</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Year" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1990</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1991</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1992</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1993</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1994</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1995</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1996</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1997</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1998</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1999</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2000</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2001</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2002</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2003</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2004</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2005</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2006</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2007</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2008</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2009</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2010</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2011</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2012</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2013</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2014</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2015</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2016</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2017</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2018</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2019</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2020</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2021</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="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>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Confirm Email</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Confirm 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>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Location</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Your Location" 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="Sydney, A"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Phone Number</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Phone Number" 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="+4 (074) 1090873"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Language</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Language" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">English</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">French</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Spanish</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Deutsche</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Russian</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Billing Method</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <table class="w-full mb-4 text-blueGray-800 border-collapse items-center">
                           <thead class="items-center">
                              <tr class="text-left">
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Type</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Number</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Payment Method</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Action</small></th>
                              </tr>
                           </thead>
                           <tbody class="">
                              <tr>
                                 <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/visas.251354e9.png"></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 8372</td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400" checked=""></label></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                              </tr>
                              <tr>
                                 <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/mastercard.d0ba8641.png"></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 1225</td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"></label></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Security Questions</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Security Question</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Security Question" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 1</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 2</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 3</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Answer</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Enter your answer" 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>
                        </div>
                     </div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Security Settings</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Notify me via email when logging in</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Send SMS confirmation for all online payments</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Check which devices accessed your account</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Find My Device, make sure your device can be found if it gets lost</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Lock your device with a PIN, pattern, or password</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Manage what apps have access to app-usage data on your device</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="px-6 py-4 border-0 rounded relative mb-4 text-white bg-blueGray-500">We will never distribute your email address to third parties. Read about email communication in our privacy policy.</div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Preferences</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone mentions me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone follows me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone shares my activty</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone messages me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone adds me to a project</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Sales and promotions</span></label><span></span></div>
                     </div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Frequency</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Daily</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Weekly</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Monthly</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Never</span></label><span></span></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="mb-12 justify-center flex flex-wrap w-full"><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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Cancel</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-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Save Change</button></div>
         </div>
      </div>
   </div>
</div>

Copied

Sandra Bailey

Profile completion

80%

Billing Method

Card Type	Card Number	Payment Method	Action
	•••• •••• •••• 8372
	•••• •••• •••• 1225

<div class="w-full">
   <div class="bg-white mb-0 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
      <div class="w-full px-4 mx-auto px-4">
         <div class="flex flex-wrap -mx-4">
            <div class="px-4 relative w-full md:w-3/12">
               <div class="relative py-12">
                  <section class="text-center block">
                     <div class="text-center">
                        <input class="hidden" type="file">
                        <div class="rounded-full mx-auto shadow-lg rounded max-w-100-px mb-4"><img class="rounded-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" alt="..."></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-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">change</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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">remove</button></div>
                     </div>
                     <h3 class="text-3xl font-semibold mt-2 mb-4">Sandra Bailey</h3>
                  </section>
                  <section class="block">
                     <ul class="flex-col flex flex-wrap list-none pl-0 mb-0">
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">General</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-pink-500 hover:text-pink-700" href="javascript:;">Billing</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Security</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Notifications</a></li>
                     </ul>
                  </section>
                  <div class="mt-4">
                     <div class="relative w-full">
                        <div class="flex mb-2 items-center justify-between">
                           <div><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-full px-3">Profile completion</span></div>
                           <div class="text-right"><span class="text-xs font-semibold inline-block text-pink-500">80%</span></div>
                        </div>
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-pink-200">
                           <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" style="width: 80%;"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="ml-auto px-4 relative w-full md:w-8/12">
               <div class="relative py-12">
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">General Information</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">First Name</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="First Name" 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="Charlie"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Last Name</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Last Name" 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="Bailey"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">I'm</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Gender" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Female</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Male</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Birth Date</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Month" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">January</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">February</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">March</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">April</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">May</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">June</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">July</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">August</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">September</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">October</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">November</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">December</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Day" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">01</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">02</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">03</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">04</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">05</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">06</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">07</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">08</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">09</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">10</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">11</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">12</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">13</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">14</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">15</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">16</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">17</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">18</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">19</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">20</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">21</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">22</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">23</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">24</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">25</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">26</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">27</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">28</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">29</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">30</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">31</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Year" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1990</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1991</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1992</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1993</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1994</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1995</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1996</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1997</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1998</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1999</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2000</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2001</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2002</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2003</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2004</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2005</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2006</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2007</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2008</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2009</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2010</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2011</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2012</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2013</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2014</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2015</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2016</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2017</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2018</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2019</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2020</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2021</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="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>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Confirm Email</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Confirm 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>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Location</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Your Location" 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="Sydney, A"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Phone Number</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Phone Number" 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="+4 (074) 1090873"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Language</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Language" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">English</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">French</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Spanish</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Deutsche</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Russian</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out block">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Billing Method</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <table class="w-full mb-4 text-blueGray-800 border-collapse items-center">
                           <thead class="items-center">
                              <tr class="text-left">
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Type</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Number</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Payment Method</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Action</small></th>
                              </tr>
                           </thead>
                           <tbody class="">
                              <tr>
                                 <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/visas.251354e9.png"></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 8372</td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400" checked=""></label></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                              </tr>
                              <tr>
                                 <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/mastercard.d0ba8641.png"></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 1225</td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"></label></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Security Questions</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Security Question</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Security Question" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 1</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 2</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 3</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Answer</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Enter your answer" 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>
                        </div>
                     </div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Security Settings</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Notify me via email when logging in</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Send SMS confirmation for all online payments</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Check which devices accessed your account</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Find My Device, make sure your device can be found if it gets lost</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Lock your device with a PIN, pattern, or password</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Manage what apps have access to app-usage data on your device</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="px-6 py-4 border-0 rounded relative mb-4 text-white bg-blueGray-500">We will never distribute your email address to third parties. Read about email communication in our privacy policy.</div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Preferences</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone mentions me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone follows me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone shares my activty</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone messages me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone adds me to a project</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Sales and promotions</span></label><span></span></div>
                     </div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Frequency</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Daily</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Weekly</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Monthly</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Never</span></label><span></span></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="mb-12 justify-center flex flex-wrap w-full"><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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Cancel</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-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Save Change</button></div>
         </div>
      </div>
   </div>
</div>

Copied

Sandra Bailey

Profile completion

80%

Billing Method

Card Type	Card Number	Payment Method	Action
	•••• •••• •••• 8372
	•••• •••• •••• 1225

Security Questions

Security Question

Your Answer

Security Settings

Notify me via email when logging in

Send SMS confirmation for all online payments

Check which devices accessed your account

Find My Device, make sure your device can be found if it gets lost

Lock your device with a PIN, pattern, or password

Manage what apps have access to app-usage data on your device

<div class="w-full">
   <div class="bg-white mb-0 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
      <div class="w-full px-4 mx-auto px-4">
         <div class="flex flex-wrap -mx-4">
            <div class="px-4 relative w-full md:w-3/12">
               <div class="relative py-12">
                  <section class="text-center block">
                     <div class="text-center">
                        <input class="hidden" type="file">
                        <div class="rounded-full mx-auto shadow-lg rounded max-w-100-px mb-4"><img class="rounded-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" alt="..."></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-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">change</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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">remove</button></div>
                     </div>
                     <h3 class="text-3xl font-semibold mt-2 mb-4">Sandra Bailey</h3>
                  </section>
                  <section class="block">
                     <ul class="flex-col flex flex-wrap list-none pl-0 mb-0">
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">General</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Billing</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-pink-500 hover:text-pink-700" href="javascript:;">Security</a></li>
                        <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Notifications</a></li>
                     </ul>
                  </section>
                  <div class="mt-4">
                     <div class="relative w-full">
                        <div class="flex mb-2 items-center justify-between">
                           <div><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-full px-3">Profile completion</span></div>
                           <div class="text-right"><span class="text-xs font-semibold inline-block text-pink-500">80%</span></div>
                        </div>
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-pink-200">
                           <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" style="width: 80%;"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="ml-auto px-4 relative w-full md:w-8/12">
               <div class="relative py-12">
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">General Information</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">First Name</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="First Name" 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="Charlie"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Last Name</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Last Name" 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="Bailey"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">I'm</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Gender" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Female</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Male</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Birth Date</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Month" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">January</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">February</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">March</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">April</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">May</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">June</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">July</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">August</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">September</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">October</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">November</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">December</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Day" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">01</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">02</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">03</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">04</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">05</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">06</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">07</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">08</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">09</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">10</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">11</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">12</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">13</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">14</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">15</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">16</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">17</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">18</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">19</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">20</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">21</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">22</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">23</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">24</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">25</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">26</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">27</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">28</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">29</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">30</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">31</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Year" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1990</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1991</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1992</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1993</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1994</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1995</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1996</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1997</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1998</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1999</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2000</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2001</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2002</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2003</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2004</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2005</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2006</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2007</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2008</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2009</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2010</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2011</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2012</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2013</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2014</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2015</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2016</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2017</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2018</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2019</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2020</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2021</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="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>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Confirm Email</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Confirm 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>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Location</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Your Location" 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="Sydney, A"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Phone Number</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Phone Number" 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="+4 (074) 1090873"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Language</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Language" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">English</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">French</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Spanish</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Deutsche</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Russian</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Billing Method</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <table class="w-full mb-4 text-blueGray-800 border-collapse items-center">
                           <thead class="items-center">
                              <tr class="text-left">
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Type</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Number</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Payment Method</small></th>
                                 <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Action</small></th>
                              </tr>
                           </thead>
                           <tbody class="">
                              <tr>
                                 <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/visas.251354e9.png"></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 8372</td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400" checked=""></label></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                              </tr>
                              <tr>
                                 <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/mastercard.d0ba8641.png"></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 1225</td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"></label></td>
                                 <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out block">
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Security Questions</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Security Question</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="relative">
                                       <div class="mb-3 pt-0"><input placeholder="Security Question" 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=""></div>
                                       <div class="hidden z-50">
                                          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 1</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 2</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 3</a></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                           <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Answer</label></div>
                           <div class="self-center px-4 relative w-full md:w-9/12">
                              <div class="flex flex-wrap -mx-4">
                                 <div class="px-4 relative w-full undefined">
                                    <div class="mb-3 pt-0"><input placeholder="Enter your answer" 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>
                        </div>
                     </div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Security Settings</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Notify me via email when logging in</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Send SMS confirmation for all online payments</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Check which devices accessed your account</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Find My Device, make sure your device can be found if it gets lost</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Lock your device with a PIN, pattern, or password</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Manage what apps have access to app-usage data on your device</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                     </div>
                  </div>
                  <div class="my-8 duration-500 transition-all ease-in-out hidden">
                     <div class="px-6 py-4 border-0 rounded relative mb-4 text-white bg-blueGray-500">We will never distribute your email address to third parties. Read about email communication in our privacy policy.</div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Preferences</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone mentions me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone follows me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone shares my activty</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone messages me</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone adds me to a project</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Sales and promotions</span></label><span></span></div>
                     </div>
                     <div class="mb-6">
                        <header class="block relative">
                           <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Frequency</h2>
                        </header>
                        <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Daily</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Weekly</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Monthly</span></label><span></span></div>
                        <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Never</span></label><span></span></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="mb-12 justify-center flex flex-wrap w-full"><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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Cancel</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-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Save Change</button></div>
         </div>
      </div>
   </div>
</div>

Copied

Sandra Bailey

Profile completion

80%

Billing Method

Card Type	Card Number	Payment Method	Action
	•••• •••• •••• 8372
	•••• •••• •••• 1225

<div class="w-full">
   <div class="bg-white mb-0 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
     <div class="w-full px-4 mx-auto px-4">
       <div class="flex flex-wrap -mx-4">
         <div class="px-4 relative w-full md:w-3/12">
           <div class="relative py-12">
             <section class="text-center block">
               <div class="text-center">
                 <input class="hidden" type="file">
                 <div class="rounded-full mx-auto shadow-lg rounded max-w-100-px mb-4"><img class="rounded-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" alt="..."></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-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">change</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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">remove</button></div>
               </div>
               <h3 class="text-3xl font-semibold mt-2 mb-4">Sandra Bailey</h3>
             </section>
             <section class="block">
               <ul class="flex-col flex flex-wrap list-none pl-0 mb-0">
                 <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">General</a></li>
                 <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Billing</a></li>
                 <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-blueGray-400 hover:text-pink-700" href="javascript:;">Security</a></li>
                 <li class="last:border-0 border-b border-solid py-1"><a class="text-blueGray-700 text-xs uppercase py-3 pl-2 font-bold block duration-300 transition-all ease-in-out text-pink-500 hover:text-pink-700" href="javascript:;">Notifications</a></li>
               </ul>
             </section>
             <div class="mt-4">
               <div class="relative w-full">
                 <div class="flex mb-2 items-center justify-between">
                   <div><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-full px-3">Profile completion</span></div>
                   <div class="text-right"><span class="text-xs font-semibold inline-block text-pink-500">80%</span></div>
                 </div>
                 <div class="overflow-hidden h-2 text-xs flex rounded bg-pink-200">
                   <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" style="width: 80%;"></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div class="ml-auto px-4 relative w-full md:w-8/12">
           <div class="relative py-12">
             <div class="my-8 duration-500 transition-all ease-in-out hidden">
               <div class="mb-6">
                 <header class="block relative">
                   <h2 class="text-2xl font-semibold mt-0 mb-2">General Information</h2>
                 </header>
                 <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">First Name</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="First Name" 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="Charlie"></div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Last Name</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="Last Name" 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="Bailey"></div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">I'm</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="relative">
                           <div class="mb-3 pt-0"><input placeholder="Gender" 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=""></div>
                           <div class="hidden z-50">
                             <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Female</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Male</a></div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Birth Date</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="relative">
                           <div class="mb-3 pt-0"><input placeholder="Month" 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=""></div>
                           <div class="hidden z-50">
                             <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">January</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">February</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">March</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">April</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">May</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">June</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">July</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">August</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">September</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">October</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">November</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">December</a></div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="relative">
                           <div class="mb-3 pt-0"><input placeholder="Day" 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=""></div>
                           <div class="hidden z-50">
                             <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">01</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">02</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">03</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">04</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">05</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">06</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">07</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">08</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">09</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">10</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">11</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">12</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">13</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">14</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">15</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">16</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">17</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">18</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">19</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">20</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">21</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">22</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">23</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">24</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">25</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">26</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">27</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">28</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">29</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">30</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">31</a></div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1"></label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="relative">
                           <div class="mb-3 pt-0"><input placeholder="Year" 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=""></div>
                           <div class="hidden z-50">
                             <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1990</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1991</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1992</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1993</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1994</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1995</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1996</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1997</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1998</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">1999</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2000</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2001</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2002</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2003</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2004</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2005</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2006</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2007</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2008</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2009</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2010</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2011</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2012</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2013</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2014</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2015</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2016</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2017</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2018</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2019</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2020</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">2021</a></div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="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>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Confirm Email</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="Confirm 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>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Location</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="Your Location" 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="Sydney, A"></div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Phone Number</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="Phone Number" 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="+4 (074) 1090873"></div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Language</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="relative">
                           <div class="mb-3 pt-0"><input placeholder="Language" 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=""></div>
                           <div class="hidden z-50">
                             <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">English</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">French</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Spanish</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Deutsche</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Russian</a></div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="my-8 duration-500 transition-all ease-in-out hidden">
               <div class="mb-6">
                 <header class="block relative">
                   <h2 class="text-2xl font-semibold mt-0 mb-2">Billing Method</h2>
                 </header>
                 <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                 <table class="w-full mb-4 text-blueGray-800 border-collapse items-center">
                   <thead class="items-center">
                     <tr class="text-left">
                       <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Type</small></th>
                       <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Card Number</small></th>
                       <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Payment Method</small></th>
                       <th class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><small>Action</small></th>
                     </tr>
                   </thead>
                   <tbody class="">
                     <tr>
                       <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/visas.251354e9.png"></td>
                       <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 8372</td>
                       <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400" checked=""></label></td>
                       <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                     </tr>
                     <tr>
                       <td class="align-middle uppercase font-bold text-sm p-3 border-t text-blueGray-500"><img alt="..." class="bg-white inline-flex justify-center items-center w-12" src="https://demos.creative-tim.com/notus-pro-react/static/media/mastercard.d0ba8641.png"></td>
                       <td class="align-middle uppercase font-normal p-3 border-t">•••• •••• •••• 1225</td>
                       <td class="align-middle uppercase font-normal p-3 border-t"><label class="inline-flex items-center cursor-pointer"><input name="billing-method" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"></label></td>
                       <td class="align-middle uppercase font-normal p-3 border-t"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">delete</button></td>
                     </tr>
                   </tbody>
                 </table>
               </div>
             </div>
             <div class="my-8 duration-500 transition-all ease-in-out hidden">
               <div class="mb-6">
                 <header class="block relative">
                   <h2 class="text-2xl font-semibold mt-0 mb-2">Security Questions</h2>
                 </header>
                 <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Security Question</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="relative">
                           <div class="mb-3 pt-0"><input placeholder="Security Question" 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=""></div>
                           <div class="hidden z-50">
                             <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 1</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 2</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Question 3</a></div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="flex flex-wrap -mx-4">
                   <div class="self-center px-4 relative w-full md:w-3/12 text-right"><label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your Answer</label></div>
                   <div class="self-center px-4 relative w-full md:w-9/12">
                     <div class="flex flex-wrap -mx-4">
                       <div class="px-4 relative w-full undefined">
                         <div class="mb-3 pt-0"><input placeholder="Enter your answer" 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>
                 </div>
               </div>
               <div class="mb-6">
                 <header class="block relative">
                   <h2 class="text-2xl font-semibold mt-0 mb-2">Security Settings</h2>
                 </header>
                 <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Notify me via email when logging in</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Send SMS confirmation for all online payments</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Check which devices accessed your account</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Find My Device, make sure your device can be found if it gets lost</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Lock your device with a PIN, pattern, or password</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300" checked=""></label></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><span>Manage what apps have access to app-usage data on your device</span><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"></label></div>
               </div>
             </div>
             <div class="my-8 duration-500 transition-all ease-in-out block">
               <div class="px-6 py-4 border-0 rounded relative mb-4 text-white bg-blueGray-500">We will never distribute your email address to third parties. Read about email communication in our privacy policy.</div>
               <div class="mb-6">
                 <header class="block relative">
                   <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Preferences</h2>
                 </header>
                 <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone mentions me</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone follows me</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone shares my activty</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone messages me</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Someone adds me to a project</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Sales and promotions</span></label><span></span></div>
               </div>
               <div class="mb-6">
                 <header class="block relative">
                   <h2 class="text-2xl font-semibold mt-0 mb-2">Notification Frequency</h2>
                 </header>
                 <hr class="w-full mt-2 mb-8 h-0 border-blueGray-400">
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Daily</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Weekly</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Monthly</span></label><span></span></div>
                 <div class="flex items-center justify-between mb-3 pt-0 relative"><label class="inline-flex items-center cursor-pointer"><input name="notification-frequency" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">Never</span></label><span></span></div>
               </div>
             </div>
           </div>
         </div>
         <div class="mb-12 justify-center flex flex-wrap w-full"><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-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Cancel</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-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Save Change</button></div>
       </div>
     </div>
   </div>
 </div>

Copied

Charlie Watson

Online

Typing...

Jane Doe

Online

Computer users and programmers

Mila Skylar

23 min ago

You can subscribe to receive weekly...

Sofia Scarlett

1 hour ago

It’s an effective resource regardless...

Tom Klein

Offline

Be sure to check it out if your dev pro...

<div class="w-full md:w-1/3">
   <div class="flex justify-center bg-white border-0 shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6">
      <div class="bg-blueGray-200 rounded-t-lg">
         <div class="my-4 mb-3 px-3 relative">
            <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-search"></i></span><input placeholder="Search contact" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
         </div>
      </div>
      <div class="mt-4 flex pl-0 mb-3 flex-col">
         <div class="mx-4 rounded-md relative block my-1 bg-blueGray-800 text-white">
            <a href="javascript:;">
               <div class="flex items-center p-3">
                  <img src="https://demos.creative-tim.com/notus-pro-react/static/media/christian.5e3b567c.jpg" class="rounded-full max-w-40-px" alt="...">
                  <div class="flex-1">
                     <div class="justify-between items-center">
                        <h6 class="text-lg font-semibold leading-normal pl-3 inline-block">Charlie Watson</h6>
                        <p class="text-blueGray-200 uppercase font-bold text-xs inline-block float-right text-blueGray-200">Online<span class="p-1 mt-2 ml-2 text-xs font-semibold inline-block uppercase last:mr-0 mr-1 p-1 rounded bg-emerald-400"></span></p>
                        <div class="pl-3"><span class="block truncate text-blueGray-100">Typing...</span></div>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="mx-4 rounded-md relative block my-1 bg-blueGray-200 text-blueGray-800">
            <a href="javascript:;">
               <div class="flex items-center p-3">
                  <img src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2.b81557ef.jpg" class="rounded-full max-w-40-px" alt="...">
                  <div class="flex-1">
                     <div class="justify-between items-center">
                        <h6 class="text-lg font-semibold leading-normal pl-3 inline-block">Jane Doe</h6>
                        <p class="text-blueGray-200 uppercase font-bold text-xs inline-block float-right text-blueGray-500">Online<span class="p-1 mt-2 ml-2 text-xs font-semibold inline-block uppercase last:mr-0 mr-1 p-1 rounded bg-emerald-400"></span></p>
                        <div class="pl-3"><span class="block truncate text-blueGray-500">Computer users and programmers</span></div>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="mx-4 rounded-md relative block my-1 bg-blueGray-200 text-blueGray-800">
            <a href="javascript:;">
               <div class="flex items-center p-3">
                  <img src="https://demos.creative-tim.com/notus-pro-react/static/media/team-3.c5d0c11c.jpg" class="rounded-full max-w-40-px" alt="...">
                  <div class="flex-1">
                     <div class="justify-between items-center">
                        <h6 class="text-lg font-semibold leading-normal pl-3 inline-block">Mila Skylar</h6>
                        <p class="text-blueGray-200 uppercase font-bold text-xs inline-block float-right text-blueGray-500">23 min ago</p>
                        <div class="pl-3"><span class="block truncate text-blueGray-500">You can subscribe to receive weekly...</span></div>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="mx-4 rounded-md relative block my-1 bg-blueGray-200 text-blueGray-800">
            <a href="javascript:;">
               <div class="flex items-center p-3">
                  <img src="https://demos.creative-tim.com/notus-pro-react/static/media/team-4.639c2559.jpg" class="rounded-full max-w-40-px" alt="...">
                  <div class="flex-1">
                     <div class="justify-between items-center">
                        <h6 class="text-lg font-semibold leading-normal pl-3 inline-block">Sofia Scarlett</h6>
                        <p class="text-blueGray-200 uppercase font-bold text-xs inline-block float-right text-blueGray-500">1 hour ago</p>
                        <div class="pl-3"><span class="block truncate text-blueGray-500">It’s an effective resource regardless...</span></div>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="mx-4 rounded-md relative block my-1 bg-blueGray-200 text-blueGray-800">
            <a href="javascript:;">
               <div class="flex items-center p-3">
                  <img src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1.26905a67.jpg" class="rounded-full max-w-40-px" alt="...">
                  <div class="flex-1">
                     <div class="justify-between items-center">
                        <h6 class="text-lg font-semibold leading-normal pl-3 inline-block">Tom Klein</h6>
                        <p class="text-blueGray-200 uppercase font-bold text-xs inline-block float-right text-blueGray-500">Offline<span class="p-1 mt-2 ml-2 text-xs font-semibold inline-block uppercase last:mr-0 mr-1 p-1 rounded bg-red-500"></span></p>
                        <div class="pl-3"><span class="block truncate text-blueGray-500">Be sure to check it out if your dev pro...</span></div>
                     </div>
                  </div>
               </div>
            </a>
         </div>
      </div>
   </div>
</div>

Card Chat

Copied

Charlie Watson

last seen today at 7:38 AM

Typing...

At the end of the day... the native dev apps is where users are

4:47am

4:46am

Awesome, blog is important source material for anyone who creates apps?

Because these blogs offer a lot of information about website development.

4:46am

You can easily get it; The content here is all free

4:45am

Excellent, I want it now!

4:44am

Yeah! Responsive Design is geared towards those trying to build web apps

4:31am

Wed, 3:27pm

Can it generate daily design links that include essays and data visualizations?

3:30am

It contains a lot of good lessons about effective practices

3:14am

<div class="w-full md:w-8/12">
   <div class="flex justify-center border-0 flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg">
      <div class="bg-blueGray-800 inline-block rounded-t-lg px-5 py-3">
         <div class="py-4 flex flex-row justify-between">
            <div class="flex items-center">
               <img src="https://demos.creative-tim.com/notus-pro-react/static/media/christian.5e3b567c.jpg" class="rounded-full mr-4 max-w-64-px" alt="...">
               <div class="text-left flex-1">
                  <div class="justify-between items-center">
                     <h5 class="text-2xl text-white font-semibold leading-tight">Charlie Watson</h5>
                     <span class="text-blueGray-500"><span class="mr-2">last seen today at 7:38 AM</span></span>
                  </div>
               </div>
            </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 border-white active:bg-blueGray-100 active:border-blueGray-100 active:text-blueGray-800 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">edit</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 border-white active:bg-blueGray-100 active:border-blueGray-100 active:text-blueGray-800 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">call</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-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">video</button></div>
         </div>
      </div>
      <div class="px-4 flex flex-col-reverse flex-auto max-h-screen-70 overflow-auto overflow-x-hidden bg-blueGray-200">
         <div class="justify-start text-left flex flex-wrap -mx-4">
            <a href="pablo">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-blueGray-100 text-blueGray-800">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">Typing...</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-end text-right flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-lightBlue-500 text-white">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">At the end of the day... the native dev apps is where users are</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><span class="mr-2">4:47am</span><i class="fas fa-check"></i></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-start text-left flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-blueGray-100 text-blueGray-800">
                     <div class="">
                        <img src="https://demos.creative-tim.com/notus-pro-react/static/media/img-1.f2fd521a.jpg" class="rounded my-2 max-w-250-px" alt="...">
                        <p class="block uppercase font-semibold opacity-75 text-sm"><i class="far fa-clock mr-2"></i><span>4:46am</span></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-end text-right flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-lightBlue-500 text-white">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">Awesome, blog is important source material for anyone who creates apps?</p>
                        <p class="mb-1 text-lg leading-relaxed">Because these blogs offer a lot of information about website development.</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><span class="mr-2">4:46am</span><i class="fas fa-check"></i></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-start text-left flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-blueGray-100 text-blueGray-800">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">You can easily get it; The content here is all free</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><i class="far fa-clock mr-2"></i><span>4:45am</span></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-end text-right flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-lightBlue-500 text-white">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">Excellent, I want it now!</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><span class="mr-2">4:44am</span><i class="fas fa-check"></i></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-start text-left flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-blueGray-100 text-blueGray-800">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">Yeah! Responsive Design is geared towards those trying to build web apps</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><i class="far fa-clock mr-2"></i><span>4:31am</span></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="mt-6 flex flex-wrap -mx-4">
            <div class="px-4 relative w-full lg:w-full"><span class="text-blueGray-500 font-semibold flex justify-center mt-4">Wed, 3:27pm</span></div>
         </div>
         <div class="justify-end text-right flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-lightBlue-500 text-white">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">Can it generate daily design links that include essays and data visualizations?</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><span class="mr-2">3:30am</span><i class="fas fa-check"></i></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
         <div class="justify-start text-left flex flex-wrap -mx-4">
            <a href="javascript:;">
               <div class="px-4 relative w-auto">
                  <div class="relative flex px-4 py-2 my-4 break-words shadow-lg rounded-lg bg-blueGray-100 text-blueGray-800">
                     <div class="">
                        <p class="mb-1 text-lg leading-relaxed">It contains a lot of good lessons about effective practices</p>
                        <p class="block uppercase font-semibold opacity-75 text-sm"><i class="far fa-clock mr-2"></i><span>3:14am</span></p>
                     </div>
                  </div>
               </div>
            </a>
         </div>
      </div>
      <div class="bg-white rounded-b-lg px-4 py-3 border-t border-blueGray-300">
         <div class="my-4 mb-3 pt-0 relative">
            <div class="mb-3 pt-0"><input placeholder="Your message" 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>

PresentationComponents

Cards

Card Profile Full Page

Jenna Stones

Card Product Price

Trending

Gucci Blazer

Card Pricing List

Freelancer Package

Complete documentation

Working materials in Sketch

Unlimited cloud storage

Card Table Details

Enterprise Offer

Card Info Icon Bg

Message from team

Card Invoice

St. Independence Embankment, 050105 Bucharest, Romania

tel: +4 (074) 1090873

Billed to:

James Thompson

Invoice no

#0453119

Thank you!

email:[email protected]

Card Product Text

Wearing

Check our latest collection

Card Product Plain

Burberry

Card Products Checkout

Shorts

Jacket

Subtotal

$1.290

Shipping

$200

Total

$1.490

Card Billing

Billing address

Payment method

Sandra Bailey

Sandra Bailey

Sandra Bailey

Sandra Bailey

Charlie Watson

Jane Doe

Mila Skylar

Sofia Scarlett

Tom Klein

Card Chat

Charlie Watson