Skip to content

Instantly share code, notes, and snippets.

@ifindev
Created March 21, 2021 15:49
Show Gist options
  • Save ifindev/6303acda602cf4575ae4040d7f495d01 to your computer and use it in GitHub Desktop.
Save ifindev/6303acda602cf4575ae4040d7f495d01 to your computer and use it in GitHub Desktop.
Tailwind Kanban

Tailwind Kanban

A simple exploration to build a kanban board using css grid in Tailwind CSS. So it's about 187 lines for just the mockup. This is totally normal because I just use plain HTML. For the next update, I will use Vue component to recreate it since it will clean up the code and more reusable.

Anyway, the UI is already responsive. But since I am using grids, I haven't figure out how to apply a horizontal scroll bar for the overflow case just like a normal kanban boards. Also, open up Tailwind Play to try out this project.

The design is inpired from this image. Kanban

<!-- Inspiration https://s3-ap-southeast-2.amazonaws.com/focusbooster.cdn/Landing+pages/kanban-and-focusbooster/kanban-board-notion.png -->
<div class="h-screen p-2">
<div class="grid lg:grid-cols-7 md:grid-cols-4 sm:grid-cols-2 gap-5">
<!-- To-do -->
<div class="bg-white rounded px-2 py-2">
<!-- board category header -->
<div class="flex flex-row justify-between items-center mb-2 mx-1">
<div class="flex items-center">
<h2 class="bg-red-100 text-sm w-max px-1 rounded mr-2 text-gray-700">To-do</h2>
<p class="text-gray-400 text-sm">3</p>
</div>
<div class="flex items-center text-gray-300">
<p class="mr-2 text-2xl">---</p>
<p class="text-2xl">+</p>
</div>
</div>
<!-- board card -->
<div class="grid grid-rows-2 gap-2">
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Social media</h3>
<p class="bg-red-100 text-xs w-max p-1 rounded mr-2 text-gray-700">To-do</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">2</p>
</div>
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Review survey results</h3>
<p class="bg-red-100 text-xs w-max p-1 rounded mr-2 text-gray-700">To-do</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">1</p>
</div>
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Research video marketing</h3>
<p class="bg-red-100 text-xs w-max p-1 rounded mr-2 text-gray-700">To-do</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">3</p>
</div>
</div>
<div class="flex flex-row items-center text-gray-300 mt-2 px-1">
<p class="rounded mr-2 text-2xl">+</p>
<p class="pt-1 rounded text-sm">New</p>
</div>
</div>
<!-- WIP Kanban -->
<div class="bg-white rounded px-2 py-2">
<!-- board category header -->
<div class="flex flex-row justify-between items-center mb-2 mx-1">
<div class="flex items-center">
<h2 class="bg-yellow-100 text-sm w-max px-1 rounded mr-2 text-gray-700">WIP</h2>
<p class="text-gray-400 text-sm">2</p>
</div>
<div class="flex items-center text-gray-300">
<p class="mr-2 text-2xl">---</p>
<p class="text-2xl">+</p>
</div>
</div>
<!-- board card -->
<div class="grid grid-rows-2 gap-2">
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Blog post live</h3>
<p class="bg-yellow-100 text-xs w-max p-1 rounded mr-2 text-gray-700">WIP</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">Jun 21, 2019</p>
<p class="text-xs text-gray-500 mt-2">2</p>
</div>
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Email campaign</h3>
<p class="bg-yellow-100 text-xs w-max p-1 rounded mr-2 text-gray-700">WIP</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">Jun 21, 2019 &#10141; Jun 21, 2019</p>
<p class="text-xs text-gray-500 mt-2">1</p>
</div>
</div>
<div class="flex flex-row items-center text-gray-300 mt-2 px-1">
<p class="rounded mr-2 text-2xl">+</p>
<p class="pt-1 rounded text-sm">New</p>
</div>
</div>
<!-- Complete Kanban -->
<div class="bg-white rounded px-2 py-2">
<!-- board category header -->
<div class="flex flex-row justify-between items-center mb-2 mx-1">
<div class="flex items-center">
<h2 class="bg-green-100 text-sm w-max px-1 rounded mr-2 text-gray-700">Complete</h2>
<p class="text-gray-400 text-sm">4</p>
</div>
<div class="flex items-center">
<p class="text-gray-300 mr-2 text-2xl">---</p>
<p class="text-gray-300 text-2xl">+</p>
</div>
</div>
<!-- board card -->
<div class="grid grid-rows-2 gap-2">
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Morning emails and to-do list</h3>
<p class="bg-green-100 text-xs w-max p-1 rounded mr-2 text-gray-700">Complete</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">Jun 21, 2019</p>
<p class="text-xs text-gray-500 mt-2">1</p>
</div>
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Blog post</h3>
<p class="bg-green-100 text-xs w-max p-1 rounded mr-2 text-gray-700">Complete</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">Jun 20, 2019</p>
<p class="text-xs text-gray-500 mt-2">5</p>
</div>
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Reconcile accounts</h3>
<p class="bg-green-100 text-xs w-max p-1 rounded mr-2 text-gray-700">Complete</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">Jun 19, 2019</p>
<p class="text-xs text-gray-600 mt-2">4</p>
</div>
<div class="p-2 rounded shadow-sm border-gray-100 border-2">
<h3 class="text-sm mb-3 text-gray-700">Website AB test</h3>
<p class="bg-green-100 text-xs w-max p-1 rounded mr-2 text-gray-700">Complete</p>
<div class="flex flex-row items-center mt-2">
<div class="bg-gray-300 rounded-full w-4 h-4 mr-3"></div>
<a href="#" class="text-xs text-gray-500">Sophie Worso</a>
</div>
<p class="text-xs text-gray-500 mt-2">Jun 18, 2019</p>
<p class="text-xs text-gray-600 mt-2">3</p>
</div>
</div>
<div class="flex flex-row items-center text-gray-300 mt-2 px-1">
<p class="rounded mr-2 text-2xl">+</p>
<p class="pt-1 rounded text-sm">New</p>
</div>
</div>
<div class="bg-white rounded px-2 py-2">
<!-- board category header -->
<div class="flex flex-row justify-between items-center mb-2 mx-1">
<div class="flex items-center">
<h2 class="bg-gray-200 w-4 px-1 rounded mr-2 text-sm text-center">.</h2>
<p class="text-gray-400 text-sm">0</p>
</div>
<div class="flex items-center text-gray-300">
<p class="mr-2 text-2xl">---</p>
<p class="text-2xl">+</p>
</div>
</div>
<div class="flex flex-row items-center text-gray-300 mt-2 px-1">
<p class="rounded mr-2 text-2xl">+</p>
<p class="pt-1 rounded text-sm">New</p>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment