Mahdi Taleghani MMTE

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.

Bookmarks bar

Resources

	#!/usr/bin/env bash

	echo -n "Enter Port Number."
	read port
	if [[ -n ${port//[0-9]/} ]]; then
	echo "Invalid Port !!"
	fi

	lsof -i tcp:$port


	#
	# REQUIRES:
	# - server (the forge server instance)
	# - event (the forge event instance)
	# - sudo_password (random password for sudo)
	# - db_password (random password for database user)
	# - callback (the callback URL)
	#

	<?php

	namespace App\Jobs;

	use App\File;
	use Illuminate\Queue\SerializesModels;
	use Illuminate\Queue\InteractsWithQueue;
	use Illuminate\Contracts\Queue\ShouldQueue;
	use GuzzleHttp\Client;

	// Source: https://twitter.com/calebporzio/status/1151876736931549185

	<div class="flex">
	<aside class="h-screen sticky top-0">
	// Fixed Sidebar
	</aside>

	<main>
	// Content
	</main>

	# Replace!
	# [!server!] (the forge server instance)
	# [!sudo_password!] (random password for sudo)
	# [!db_password!] (random password for database user)
	# [!user.name!] (git user name)
	# [!user.email!] (git user email)
	# [!server_ip!] (git user email)

	#
	# REQUIRES:

Mahdi Taleghani MMTE

Tailwind Kanban

Bookmarks bar

IELTS Cheat sheet