Last active
March 20, 2023 20:07
-
-
Save Emilsone/ab1010ef3abe6c9454c16066a0abc3e8 to your computer and use it in GitHub Desktop.
A code snippet for the kanban board layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<main> | |
<section class="task-section"> | |
<div class="w-full p-8 flex justify-around "> | |
<div class="rounded bg-grey-light w-64 p-2 card-bg"> | |
<div class="flex justify-between py-1"> | |
<h3 class="text-lg">New Pitch</h3> | |
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 24 24"> | |
<path | |
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" /> | |
</svg> | |
</div> | |
<div class="text-sm mt-2"> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Introduction to Tailwind CSS | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Grapql and Vue: Consume API | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Frontend:React vs Vue | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="flex justify-between align-middle items-center m-3"> | |
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" | |
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | |
class="w-4 h-4 "> | |
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |
</svg> | |
<span>Add a card...</span> | |
</p> | |
<span class="pt-3"> | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" | |
stroke="currentColor" class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" | |
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" /> | |
</svg> | |
</span> | |
</div> | |
</div> | |
</div> | |
<div class="rounded bg-grey-light w-64 p-2 card-bg"> | |
<div class="flex justify-between py-1"> | |
<h3 class="text-lg">Content in Progress</h3> | |
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 24 24"> | |
<path | |
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" /> | |
</svg> | |
</div> | |
<div class="text-sm mt-2"> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Vuex vs Pinia | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Svelte vs React | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="flex justify-between align-middle items-center m-3"> | |
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" | |
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | |
class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |
</svg> | |
<span>Add a card...</span> | |
</p> | |
<span class="pt-3"> | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" | |
stroke="currentColor" class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" | |
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" /> | |
</svg> | |
</span> | |
</div> | |
</div> | |
</div> | |
<div class="rounded bg-grey-light w-64 p-2 card-bg"> | |
<div class="flex justify-between py-1"> | |
<h3 class="text-lg">Draft Received</h3> | |
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 24 24"> | |
<path | |
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" /> | |
</svg> | |
</div> | |
<div class="text-sm mt-2"> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Getting started with Next.JS | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
Why you should use Vue.js | |
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start"> | |
<span class="text-xs flex items-center"> | |
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 50 50"> | |
<path | |
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" /> | |
</svg> | |
3/5 | |
</span> | |
</div> | |
</div> | |
<div class="flex justify-between align-middle items-center m-3"> | |
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" | |
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | |
class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |
</svg> | |
<span>Add a card...</span> | |
</p> | |
<span class="pt-3"> | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" | |
stroke="currentColor" class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" | |
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" /> | |
</svg> | |
</span> | |
</div> | |
</div> | |
</div> | |
<div class="rounded bg-grey-light w-64 p-2 card-bg"> | |
<div class="flex justify-between py-1"> | |
<h3 class="text-lg">In Review</h3> | |
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 24 24"> | |
<path | |
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" /> | |
</svg> | |
</div> | |
<div class="text-sm mt-2"> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
What is Open Source ? | |
</div> | |
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter"> | |
<div class="flex justify-between align-middle items-center m-3"> | |
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" | |
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | |
class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |
</svg> | |
<span>Add a card...</span> | |
</p> | |
<span class="pt-3"> | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" | |
stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> | |
<path stroke-linecap="round" stroke-linejoin="round" | |
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" /> | |
</svg> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
</main> | |
</template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment