PresentationPages

Chat

Copied
Chat / Messages

Don’t be afraid to be wrong because you can’t learn anything from a compliment.
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...
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
Thank you for supporting us!

Let's get in touch on any of these platforms.

<div class="relative w-full ct-docs-disable-nav-fixed">
    
    <nav class="w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-0 bg-blueGray-800 shadow-md">
       <div class="flex container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
          <a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase text-white" href="#/"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/creative-tim/logo.png" class="rounded-full mr-2" style="width: 30px;"><span>Creative Tim</span></a><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden" type="button"><i class="fas fa-bars"></i></button>
          <div class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden">
             <ul class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                <li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white">Elements</a></li>
                <li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white">Sections</a></li>
                <li class="relative">
                   <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white" href="javascript:;">Demo Pages <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i></a>
                   <div class="hidden  z-50">
                      <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute "><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 1</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 1</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 2</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 2</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 3</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 4</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 3</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 5</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 6</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 4</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 7</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 8</a></div>
                   </div>
                </li>
             </ul>
             <ul class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://www.facebook.com/CreativeTim" target="_blank"><i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i><span class="lg:hidden lg:ml-0 ml-2">Share on Facebook</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://www.instagram.com/creativetimofficial/" target="_blank"><i class="fab fa-instagram text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i><span class="lg:hidden lg:ml-0 ml-2">Follow on Instagram</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i><span class="lg:hidden lg:ml-0 ml-2">Tweet on Twitter</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://github.com/creativetimofficial" target="_blank"><i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i><span class="lg:hidden lg:ml-0 ml-2">Star on Github</span></a></li>
             </ul>
          </div>
       </div>
    </nav>
    
    <section class="flex relative items-center p-0 min-h-screen-60 max-h-440-px">
       <div class="absolute w-full h-full block bg-blueGray-900 opacity-75 z-1 left-0 top-0"></div>
       <div class="bg-blueGray-800 w-full h-full absolute bg-cover bg-50 z-0" style="background-image: url('../../assets/img/broofoac.jpg');"></div>
       <div class="relative h-full text-center text-white container mx-auto px-4 z-3 mb-16">
          <div class="justify-center flex flex-wrap -mx-4">
             <div class="px-12 px-4 relative w-full lg:w-6/12 w-full md:w-8/12">
                <h1 class="text-4xl font-bold leading-tight">Chat / Messages</h1>
                <p class="text-lg opacity-75 pt-2">Don’t be afraid to be wrong because you can’t learn anything from a compliment.</p>
             </div>
          </div>
       </div>
       <div class="w-full bottom-0 absolute z-2">
          <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
             <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
                <polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
             </svg>
          </div>
       </div>
    </section>
    <section class="relative bg-blueGray-100 py-4 z-2">
       <div class="container mx-auto px-4 -mt-24">
          <div class="flex flex-wrap justify-center">
             <div class="px-4 relative w-full lg:w-4/12">
                <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 font-normal">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 font-normal">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 font-normal">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 font-normal">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 font-normal">Be sure to check it out if your dev pro...</span></div>
                                  </div>
                               </div>
                            </div>
                         </a>
                      </div>
                   </div>
                </div>
             </div>
             <div class="pl-6 lg:text-right lg:self-center px-4 relative w-full lg: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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">Awesome, blog is important source material for anyone who creates apps?</p>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
                                     <p class="mb-1 text-lg leading-relaxed font-normal">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>
          </div>
       </div>
    </section>
    <div class="pt-12 pb-4 border-b bg-blueGray-100">
       <div class="container mx-auto px-4">
          <div class="justify-between items-center flex flex-wrap -mx-4">
             <div class="px-4 relative w-full lg:w-6/12">
                <h3 class="text-xl font-bold leading-normal mt-0">Thank you for supporting us!</h3>
                <h4 class="leading-normal mt-1 mb-2 text-blueGray-500">Let's get in touch on any of these platforms.</h4>
             </div>
             <div class="text-right pr-6 px-4 relative w-full lg:w-6/12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-twitter"></i></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"><i class="fab fa-facebook"></i></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"><i class="fab fa-dribbble"></i></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"><i class="fab fa-github"></i></button></div>
          </div>
       </div>
    </div>
    <footer class="bg-blueGray-100">
       <div class="container mx-auto px-4">
          <div class="items-center xl:justify-between flex flex-wrap -mx-4">
             <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                <div class="text-center xl:text-left py-6 text-sm text-blueGray-500">Copyright © 2021<a href="https://www.creative-tim.com" target="_blank" class="font-semibold ml-1">Creative Tim</a>. All rights reserved.</div>
             </div>
             <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                <ul class="justify-center xl:justify-end mx-auto flex flex-wrap list-none pl-0 mb-0">
                   <li><a href="https://www.creative-tim.com" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Creative Tim</a></li>
                   <li><a href="https://www.creative-tim.com/presentation" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">About us</a></li>
                   <li><a href="https://www.creative-tim.com/blog" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Blog</a></li>
                </ul>
             </div>
          </div>
       </div>
    </footer>
 </div>