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

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>

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

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

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

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

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