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.
<button class="px-2 py-1 lg:px-4 bg-primary text-white text-sm rounded hover:bg-primary-600 border border-primary-500">Primary</button> <button class="px-2 py-1 lg:px-4 bg-red text-white text-sm rounded hover:bg-red-600 border border-red-500">Red</button> <button class="px-2 py-1 lg:px-4 bg-green text-white text-sm rounded hover:bg-green-600 border border-green-500">Green</button> <button class="px-2 py-1 lg:px-4 bg-yellow text-white text-sm rounded hover:bg-yellow-600 border border-yellow-500">Yellow</button> <button class="px-2 py-1 lg:px-4 bg-pink text-white text-sm rounded hover:bg-pink-600 border border-pink-500"type="button" >Pink</button> <button class="px-2 py-1 lg:px-4 bg-blue text-white text-sm rounded transition hover:bg-blue-600 border border-blue font-medium">Blue</button> <button class="px-2 py-1 lg:px-4 bg-slate-100 text-gray-600 text-sm rounded hover:bg-slate-200 border border-slate-100">Light</button> <button class="px-2 py-1 lg:px-4 bg-slate-900 text-white text-sm rounded hover:bg-slate-800 border border-slate-900">Dark</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-primary text-white text-sm rounded-full transition hover:bg-primary-600 border border-primary font-medium">Primary</button> <button type="button" class="px-2 py-1 lg:px-4 bg-white text-gray-900 text-sm font-medium focus:outline-none rounded-full transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button> <button type="button" class="px-2 py-1 lg:px-4 bg-red text-white text-sm rounded-full transition hover:bg-red-600 border border-red font-medium">Red</button> <button type="button" class="px-2 py-1 lg:px-4 bg-green text-white text-sm rounded-full transition hover:bg-green-600 border border-green font-medium">Green</button> <button type="button" class="px-2 py-1 lg:px-4 bg-yellow text-slate-900 text-sm rounded-full transition hover:bg-yellow-600 border border-yellow font-medium">Yellow</button> <button type="button" class="px-2 py-1 lg:px-4 bg-pink text-white text-sm rounded-full transition hover:bg-pink-600 border border-pink font-medium">Pink</button> <button type="button" class="px-2 py-1 lg:px-4 bg-blue text-white text-sm rounded-full transition hover:bg-blue-600 border border-blue font-medium">Blue</button> <button type="button" class="px-2 py-1 lg:px-4 bg-slate-100 text-gray-600 text-sm rounded-full transition hover:bg-slate-200 border border-slate-100 font-medium">Light</button> <button type="button" class="px-2 py-1 lg:px-4 bg-slate-900 text-white text-sm rounded-full transition hover:bg-slate-800 border border-slate-900 font-medium">Dark</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-primary text-sm rounded transition hover:bg-primary-500 hover:text-white border border-primary font-medium">Primary</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium focus:outline-none rounded transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-red text-sm rounded transition hover:bg-red-600 hover:text-white border border-red font-medium">Red</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-green text-sm rounded transition hover:bg-green-600 hover:text-white border border-green font-medium">Green</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-yellow text-sm rounded transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium">Yellow</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-pink text-sm rounded transition hover:bg-pink-600 hover:text-white border border-pink font-medium">Pink</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-blue text-sm rounded transition hover:bg-blue-600 hover:text-white border border-blue font-medium">Blue</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-gray-600 text-sm rounded transition hover:bg-slate-200 hover:text-gray-900 border border-slate-100 font-medium">Light</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-slate-900 text-sm rounded transition hover:bg-slate-800 hover:text-white border border-slate-900 font-medium">Dark</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-primary text-sm rounded-full transition hover:bg-primary-500 hover:text-white border border-primary font-medium mb-2">Primary</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium mb-2 focus:outline-none rounded-full transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-red text-sm rounded-full transition hover:bg-red-600 hover:text-white border border-red font-medium mb-2">Red</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-green text-sm rounded-full transition hover:bg-green-600 hover:text-white border border-green font-medium mb-2">Green</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-yellow text-sm rounded-full transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium mb-2">Yellow</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-pink text-sm rounded-full transition hover:bg-pink-600 hover:text-white border border-pink font-medium mb-2">Pink</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-blue text-sm rounded-full transition hover:bg-blue-600 hover:text-white border border-blue font-medium mb-2">Blue</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-gray-600 text-sm rounded-full transition hover:bg-slate-200 hover:text-gray-900 border border-slate-100 font-medium mb-2">Light</button> <button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-slate-900 text-sm rounded-full transition hover:bg-slate-800 hover:text-white border border-slate-900 font-medium mb-2">Dark</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-primary-500 via-primary-600 to-primary-700 hover:bg-gradient-to-br text-sm rounded transition border border-primary-500 font-medium mb-2">Primary</button> <button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-red-600 border border-red font-medium mb-2">Red</button> <button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-green-600 border border-green font-medium mb-2">Green</button> <button type="button" class="px-2 py-1 lg:px-4 text-gray-900 bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-yellow-600 border border-yellow font-medium mb-2">Yellow</button> <button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-pink-600 border border-pink font-medium mb-2">Pink</button> <button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-blue-600 border border-blue font-medium mb-2">Blue</button> <button type="button" class="px-2 py-1 lg:px-4 text-slate-700 bg-gradient-to-r from-slate-100 via-slate-200 to-slate-300 hover:bg-gradient-to-br text-sm rounded transition hover:bg-slate-200 border border-slate-100 font-medium mb-2">Light</button> <button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-slate-500 via-slate-600 to-slate-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-slate-800 border border-slate-500/10 font-medium mb-2">Dark</button>
<button type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Purple to Blue</button> <button type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Cyan to Blue</button> <button type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Green to Blue</button> <button type="button" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Purple to Pink</button> <button type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Pink to Orange</button> <button type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Teal to Lime</button> <button type="button" class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Red to Yellow</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none "> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Purple to blue </span> </button> <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none"> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Cyan to blue </span> </button> <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:outline-none"> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Green to blue </span> </button> <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:outline-none "> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Purple to pink </span> </button> <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:outline-none "> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Pink to orange </span> </button> <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:outline-none "> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Teal to Lime </span> </button> <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group gob bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:outline-none"> <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-[.gob]:group-hover:bg-opacity-0"> Red to Yellow </span> </button>
<button type="button" class="text-white bg-[#0165E1] hover:bg-[#0165E1]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#0165E1] lg:pe-3 text-center inline-flex items-center mb-2"> <span class="bg-white w-8 h-8 text-center me-2 rounded"> <i class="fab fa-facebook text-[#0165E1] text-2xl "></i> </span> Sign in with Facebook </button> <button type="button" class="text-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#1da1f2] lg:pe-3 text-center inline-flex items-center mb-2"> <span class="bg-white w-8 h-8 text-center me-2 rounded"> <i class="fab fa-twitter text-[#1da1f2] text-2xl "></i> </span> Sign in with Twitter </button> <button type="button" class="text-white bg-[#24292F] hover:bg-[#24292F]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#24292F] lg:pe-3 text-center inline-flex items-center mb-2"> <span class="bg-white w-8 h-8 text-center me-2 rounded"> <i class="fab fa-github text-[#24292F] text-2xl "></i> </span> Sign in with Github </button> <button type="button" class="text-white bg-[#4285F4] hover:bg-[#4285F4]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#4285F4] lg:pe-3 text-center inline-flex items-center mb-2"> <span class="bg-white w-8 h-8 text-center me-2 rounded"> <i class="fab fa-google text-[#4285F4] text-2xl "></i> </span> Sign in with Google </button> <button type="button" class="text-white bg-[#050708] hover:bg-[#050708]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#050708] lg:pe-3 text-center inline-flex items-center mb-2"> <span class="bg-white w-8 h-8 text-center me-2 rounded"> <i class="fab fa-apple text-[#050708] text-2xl "></i> </span> Sign in with Apple </button>
<button type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-sm px-2 py-1 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 mb-2"> <i class="fas fa-cart-shopping mr-2"></i> Buy now </button> <button type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-sm px-2 py-1 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 mb-2"> Choose plan <i class="fas fa-arrow-right ml-2"></i> </button> <button type="button" class="inline-flex items-center px-2 py-1 text-sm font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-600 dark:hover:bg-primary-700 mb-2"> Messages <span class="inline-flex items-center justify-center w-4 h-4 ml-2 text-xs font-semibold text-primary-600 bg-primary-100 rounded-full"> 2 </span> </button> <button type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded-lg text-sm p-2 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 mb-2"> <i class="fas fa-arrow-right"></i> </button> <button type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded-full text-sm p-2 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 mb-2"> <i class="fas fa-arrow-right"></i> </button> <button type="button" class="text-primary-700 border border-5lue-700 hover:bg-primary-600 hover:text-white focus:outline-none font-medium rounded-lg text-sm p-2 text-center inline-flex items-center dark:border-primary-500 dark:text-primary-500 dark:hover:text-white mb-2"> <i class="fas fa-arrow-right"></i> </button> <button type="button" class="text-primary-700 border border-5lue-700 hover:bg-primary-600 hover:text-white focus:outline-none font-medium rounded-full text-sm p-2 text-center inline-flex items-center dark:border-primary-500 dark:text-primary-500 dark:hover:text-white mb-2"> <i class="fas fa-arrow-right"></i> </button>
<button type="button" class="px-2 py-1 text-xs font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Extra small</button> <button type="button" class="px-2 py-1 text-sm font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Small</button> <button type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-sm px-3 py-2 text-center dark:bg-primary-500 dark:hover:bg-primary-600 ">Base</button> <button type="button" class="px-3 py-2 text-base font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Large</button> <button type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-base px-5 py-3 text-center dark:bg-primary-500 dark:hover:bg-primary-600 ">Extra large</button>
<button disabled type="button" class="text-white bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-sm px-2 py-1 text-center mr-2 dark:bg-primary-600 dark:hover:bg-primary-700 inline-flex items-center"> <i class="fas fa-spinner animate-spin mr-2"></i> Loading... </button> <button disabled type="button" class="py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:text-primary-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center"> <i class="fas fa-spinner animate-spin mr-2"></i> Loading... </button>
<button type="button" class="text-white bg-primary-400 dark:bg-primary-500 cursor-not-allowed font-medium rounded text-sm px-3 py-2 text-center" disabled>Disabled button</button>
<button type="button" class="py-1 px-3 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> Profile </button> <button type="button" class="py-1 px-3 -mx-1 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> Settings </button> <button type="button" class="py-1 px-3 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> Messages </button>
