Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created August 15, 2024 22:58
Show Gist options
  • Save neisdev/f56e6cffa0084a74cc87e1403d59c6e5 to your computer and use it in GitHub Desktop.
Save neisdev/f56e6cffa0084a74cc87e1403d59c6e5 to your computer and use it in GitHub Desktop.
Download ZIP
Kanban Board using Tailwind
Raw
index.html
<!doctype html>
<html class="" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Kanban</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain-->
<!--main.css for custom style-->
<!-- <link href="https://fonts.googleapis.com/css?family=Rubik:300i,400,400i,500,500i,700&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" href="css/main.css">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="h-screen flex overflow-hidden">
<div class="w-64 py-4 px-8 bg-gray-100 border-r overflow-auto">
<img class="w-12 h-7" src="https://images.fastcompany.net/image/upload/w_596,c_limit,q_auto:best,f_auto/fc/3034007-inline-i-applelogo.jpg">
<nav class="mt-8">
<h3 class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Issues</h3>
<div class="mt-2 -mx-3">
<a class="flex rounded-lg justify-between items-center bg-gray-200 px-3 py-2 " href="#">
<p class="text-gray-900 text-sm font-medium ">All</p>
<span class="text-xs font-semibold text-gray-700">38</span>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Assigned to me</p>
<span class="text-xs font-semibold text-gray-700">2</span>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Created by me</p>
<span class="text-xs font-semibold text-gray-700">1</span>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Archived</p>
<span class="text-xs font-semibold text-gray-700"></span>
</a>
</div>
<h3 class="mt-8 text-xs font-semibold text-gray-600 uppercase tracking-wide">tags</h3>
<div class="mt-2 -mx-3">
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Bug</p>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Feature Request</p>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Marketing</p>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">v2.0</p>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Enhancement</p>
</a>
<a class="flex rounded-lg justify-between items-center px-3 py-2 " href="#">
<p class="text-gray-700 text-sm font-medium ">Design</p>
</a>
<button class="mt-3 ml-3 flex items-center text-sm font-medium text-gray-600">
<svg class="h-3 w-3 text-gray-500" height="10" viewBox="0 0 5.969 10" width="5.969" xmlns="http://www.w3.org/2000/svg"><path d="m328.678 1966.9a.443.443 0 0 1 -.561 0 .328.328 0 0 1 0-.5l4.925-4.4-4.925-4.4a.328.328 0 0 1 0-.5.427.427 0 0 1 .561 0l5.2 4.65a.328.328 0 0 1 0 .5zm0 0" fill="#000000" fill-rule="evenodd" transform="translate(-328.031 -1957)"/></svg>
<span class="ml-1">New Project</span>
</button>
</div>
</nav>
</div>
<div class="flex flex-col flex-1 min-w-0 bg-white overflow-hidden">
<div class="border-b-2 border-gray-200 flex-shrink-0">
<header class="px-6">
<div class="flex justify-between items-center border-b py-3 border-gray-200">
<div class="flex-1">
<div class="relative w-64">
<span class="absolute inset-y-0 left-0 flex items-center pl-3"><svg class="h-3 w-3 text-gray-600" height="10" viewBox="0 0 5.969 10" width="5.969" xmlns="http://www.w3.org/2000/svg"><path d="m328.678 1966.9a.443.443 0 0 1 -.561 0 .328.328 0 0 1 0-.5l4.925-4.4-4.925-4.4a.328.328 0 0 1 0-.5.427.427 0 0 1 .561 0l5.2 4.65a.328.328 0 0 1 0 .5zm0 0" fill="#718096" fill-rule="evenodd" transform="translate(-328.031 -1957)"/></svg></span>
<input placeholder="Search" class="block w-full rounded-lg border border-gray-400 pl-10 pr-4 py-2 text-sm text-gray-900 placeholder-gray-600">
</div>
</div>
<div>
<button>
<svg class="h-6 w-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" width="36" height="30" viewBox="0 0 36 30"><defs><style>.cls-1 { fill: #00224b; fill-rule: evenodd; }</style></defs><path id="twitter-icon.svg" class="cls-1" d="M3637.32 12732.5c.46 10.6-7.28 22.5-21 22.5a20.933 20.933 0 0 1-11.32-3.4 14.418 14.418 0 0 0 10.93-3.1 7.522 7.522 0 0 1-6.9-5.3 7.484 7.484 0 0 0 3.34-.1 7.586 7.586 0 0 1-5.93-7.5 7.563 7.563 0 0 0 3.35.9 7.7 7.7 0 0 1-2.29-10.1 20.7 20.7 0 0 0 15.23 7.9 7.551 7.551 0 0 1 7.19-9.3 7.213 7.213 0 0 1 5.4 2.4 15.223 15.223 0 0 0 4.69-1.8 8.087 8.087 0 0 1-3.25 4.2 15.091 15.091 0 0 0 4.24-1.2 16.038 16.038 0 0 1-3.68 3.9z" transform="translate(-3605 -12725)"/></svg>
</button>
<button class="ml-6">
<img class="h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</button>
</div>
</div>
<div class="flex items-center justify-between py-2">
<div class="flex items-center">
<h2 class="text-2xl font-semibold text-gray-900 leading-tight">All Issues</h2>
<div class="ml-6 flex items-center">
<span class="rounded-full border-2 border-white"> <img class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60"></span>
<span class="-ml-2 rounded-full border-2 border-white"> <img class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60"></span>
<span class="-ml-2 rounded-full border-2 border-white"> <img class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60"></span>
<span class="-ml-2 rounded-full border-2 border-white"> <img class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60"></span>
</div>
</div>
<div class="flex">
<span class="inline-flex p-1 border bg-gray-300 rounded-lg">
<button class="px-2 py-1 rounded">
<svg class="h-6 w-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill: #0a9bde;
}
</style>
</defs>
<circle id="list-circle-filled.svg" class="cls-1" cx="12" cy="12" r="12"/>
</svg>
</button>
<button class="px-2 py-1 bg-white rounded shadow">
<svg class="h-6 w-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<defs>
<style>
.cls-1 {
fill: #0a9bde;
fill-rule: evenodd;
}
</style>
</defs>
<path id="lisi-icon-circle.svg" class="cls-1" d="M2704,8053a10,10,0,1,0,10,10A10,10,0,0,0,2704,8053Zm0,15.35a5.35,5.35,0,1,1,5.35-5.35A5.35,5.35,0,0,1,2704,8068.35Z" transform="translate(-2694 -8053)"/>
</svg>
</button>
</span>
<button class="ml-5 flex items-center pl-2 pr-4 py-2 text-sm font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-700">
<svg class="h-3 w-3" height="10" viewBox="0 0 5.969 10" width="5.969" xmlns="http://www.w3.org/2000/svg"><path d="m328.678 1966.9a.443.443 0 0 1 -.561 0 .328.328 0 0 1 0-.5l4.925-4.4-4.925-4.4a.328.328 0 0 1 0-.5.427.427 0 0 1 .561 0l5.2 4.65a.328.328 0 0 1 0 .5zm0 0" fill="#ffffff" fill-rule="evenodd" transform="translate(-328.031 -1957)"/></svg>
<span class="ml-1 leading-tight">New Issue</span>
</button>
</div>
</div>
</header>
</div>
<div class="overflow-auto flex-1">
<main class="p-3 flex inline-">
<div class="flex-shrink-0 p-3 w-80 bg-gray-100 rounded-lg">
<h3 class="text-sm font-medium text-gray-900">Backlog</h3>
<ul class="mt-2">
<li>
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="text-sm w-48 font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="text-sm w-48 font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="text-sm w-48 font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="text-sm w-48 font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="p-3 w-80 bg-gray-100 rounded-lg">
<h3 class="text-sm font-medium text-gray-900">Backlog</h3>
<ul class="mt-2">
<li>
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="p-3 w-80 bg-gray-100 rounded-lg">
<h3 class="text-sm font-medium text-gray-900">Backlog</h3>
<ul class="mt-2">
<li>
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="p-3 w-80 bg-gray-100 rounded-lg">
<h3 class="text-sm font-medium text-gray-900">Backlog</h3>
<ul class="mt-2">
<li>
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
<li class="mt-3">
<a class="block p-5 rounded-lg shadow bg-white" href="#">
<div class="flex justify-between">
<p class="w-56 text-sm font-medium leading-snug text-gray-900">Add discount code to checkout page</p>
<span>
<img class="h-6 w-6 ml-4 rounded-full " src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=144&h=144&q=60">
</span>
</div>
<div class="flex justify-between items-baseline">
<time class="text-sm" datetime="2019-09-14">Sep 14</time>
<div class="mt-2">
<span class="px-2 py-1 leading-tight inline-flex items-center bg-teal-100 rounded">
<svg class="h-2 w-2 text-teal-500" viewbox="0 0 8 8" fill="#000000">
<circle cx='4' cy='4' r='3'/>
</svg>
<span class="ml-2 text-teal-900 font-medium text-sm ">Feature Request</span>
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</main>
</div>
</div>
</div>
</body>
Raw
style.css
* {
-webkit-transition: all 0.25s ease-in-out 0s !important;
transition: all 0.25s ease-in-out 0s !important;
}
html {
color: #76828c;
font-family: 'MierB', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
}
body {
-webkit-font-smoothing: antialiased !important;
text-rendering: optimizeLegibility;
background-color: #ecf1f2;
font-family: 'MierB-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 400;
font-size: 16px;
}
.w-9{
width: 2.25rem;
}
.h-9{
height: 2.25rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment