We Design and Develop Clean and High Quality Web Applications
Karen Robinson
Hey ! i'm available here
Your order is placed
Dummy text of the printing and industry.
Robert McCray
Good Morning!
Meeting with designers
It is a long established fact that a reader.
<!-- Css --> <link href="assets/libs/prismjs/themes/prism-twilight.min.css" type="text/css" rel="stylesheet"> <!-- JS --> <script src="assets/libs/simple-datatables/umd/simple-datatables.js"></script> <!-- HTML --> <table class="w-full border-collapse" id="datatable_1"> <thead class="bg-slate-100 dark:bg-slate-700/20"> <tr> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Lead </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Email </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Phone No </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Status </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Action </th> </tr> </thead> <tbody> <!-- 1 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 2 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 3 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 4 --> <tr class="bg-white dark:bg-gray-900"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 5 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 6 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 7 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 8 --> <tr class="bg-white dark:bg-gray-900"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 9 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 10--> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 11--> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 12 --> <tr class="bg-white dark:bg-gray-900"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> </tbody> </table> <!-- Init js --> const dataTable = new simpleDatatables.DataTable("#datatable_1", { searchable: true, fixedHeight: false, })
<!-- Css --> <link href="assets/libs/prismjs/themes/prism-twilight.min.css" type="text/css" rel="stylesheet"> <!-- JS --> <script src="assets/libs/simple-datatables/umd/simple-datatables.js"></script> <!-- HTML --> <table class="w-full" id="datatable_2"> <thead class="bg-slate-100 dark:bg-slate-700/20"> <tr> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Lead </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Email </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Phone No </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Status </th> <th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase"> Action </th> </tr> </thead> <tbody> <!-- 1 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 2 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 3 --> <tr class="bg-white border-b border-dashed dark:bg-gray-900 dark:border-gray-700"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> <!-- 4 --> <tr class="bg-white dark:bg-gray-900"> <td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white"> <img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> xyx@gmail.com </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> +123456789 </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span> </td> <td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"> <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a> <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a> </td> </tr> </tbody> </table> <button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 csv">Export CSV</button> <button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 sql">Export SQL</button> <button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 txt">Export TXT</button> <button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 json">Export JSON</button> <!-- Init js --> const dataTable_2 = new simpleDatatables.DataTable("#datatable_2") document.querySelector("button.csv").addEventListener("click", () => { dataTable_2.export({ type:"csv", download: true, lineDelimiter: "\n\n", columnDelimiter: ";" }) }) document.querySelector("button.sql").addEventListener("click", () => { dataTable_2.export({ type:"sql", download: true, tableName: "export_table" }) }) document.querySelector("button.txt").addEventListener("click", () => { dataTable_2.export({ type:"txt", download: true, }) }) document.querySelector("button.json").addEventListener("click", () => { dataTable_2.export({ type:"json", download: true, escapeHTML: true, space: 3 }) })
Donald Gardner
Matt Rosales
Michael Hill
Dorothy Key