Desktop design

Add task

View task

Tablet design

Mobile design

Kanban task management web app

<h3 class="heading-sm ml-6 uppercase">All boards (3)</h3>

<h3 class="heading-m  font-bold text-mediumGrey py-3 group-hover:text-mainPurple active-board">Platform Launch</h3>

<h3 class="heading-m  font-bold text-mediumGrey py-3 group-hover:text-mainPurple false">Marketing Plan</h3>

<h3 class="heading-m  font-bold text-mediumGrey py-3 group-hover:text-mainPurple false">Roadmap</h3>

<button class="heading-m font-bold text-mainPurple py-3 group-hover:text-white">+ Create New Board</button>

></script><style type=`text/css` data-rbd-always=`0`> [data

} </style><style type=`text/css` data-rbd-dynamic=`0`> [data

e`></span><img alt=`kanban logo` src=`/logo-dark.svg` decoding=`async` data-nimg=`intrinsic` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/logo-dark.svg 1x, /logo-dark.svg 2x`><noscr

e`></span><img alt=`Sun` src=`/icon-light-theme.svg` decoding=`async` data-nimg=`intrinsic` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/icon-light-theme.svg 1x, /icon-light-theme.svg 2x`><noscr

value=``><div class=`w-10 h-5 bg-mainPurpleHover rounded-full peer peer-checked:after:translate-x-5 dark:bg-mainPurpleHover peer-checked:after:border-white after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-mainPurple`></div>

e`></span><img alt=`Moon` src=`/icon-dark-theme.svg` decoding=`async` data-nimg=`intrinsic` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/icon-dark-theme.svg 1x, /icon-dark-theme.svg 2x`><noscr

ath></svg><h3 class=`heading-m font-bold py-3`>Hide S

xt-id=`0`><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`qa-and-test-all-major-user-journeys` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`qa-and-test-all-major-user-journeys` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`build-ui-for-onboarding-flow` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`build-ui-for-onboarding-flow` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`build-ui-for-search` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`build-ui-for-search` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`build-settings-ui` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`build-settings-ui` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

xt-id=`0`><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`research-pricing-points-of-various-competitors-and-trial-different-business-models` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`research-pricing-points-of-various-competitors-and-trial-different-business-models` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`design-settings-and-search-pages` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`design-settings-and-search-pages` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`add-account-management-endpoints` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`add-account-management-endpoints` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`design-onboarding-flow` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`design-onboarding-flow` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`add-search-endpoints` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`add-search-endpoints` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`add-authentication-endpoints` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`add-authentication-endpoints` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

xt-id=`0`><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`research-the-market` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`research-the-market` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`conduct-5-wireframe-tests` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`conduct-5-wireframe-tests` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`create-wireframe-prototype` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`create-wireframe-prototype` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`review-results-of-usability-tests-and-iterate` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`review-results-of-usability-tests-and-iterate` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`create-paper-prototypes-and-conduct-10-usability-tests-with-potential-customers` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`create-paper-prototypes-and-conduct-10-usability-tests-with-potential-customers` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`market-discovery` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`market-discovery` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

s</p></li><li class=`group select-none shadow-main px-4 py-6 rounded-lg cursor-pointer bg-white text-black dark:bg-darkGrey dark:text-white` data-rbd-draggable-context-id=`0` data-rbd-draggable-id=`competitor-analysis` tabindex=`0` role=`button` aria-describedby=`rbd-hidden-text-0-hidden-text-0` data-rbd-drag-handle-draggable-id=`competitor-analysis` data-rbd-drag-handle-context-id=`0` draggable=`false`><h4 cl

Please log in to post a comment

Community feedback

Kanban app built with React, Next.js, and TailwindCSS

Please log in to post a comment

Community feedback

Join our Discord community