Tailwind Kanban

README.md

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.

tailwind-kanban.html

<!-- 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>