Skip to content

Instantly share code, notes, and snippets.

@TerryMooreII
Created May 17, 2021 23:40
Show Gist options
  • Save TerryMooreII/5ff94d774638fa33e602696f043ebaff to your computer and use it in GitHub Desktop.
Save TerryMooreII/5ff94d774638fa33e602696f043ebaff to your computer and use it in GitHub Desktop.
Tailwinds css and Brackets w/flex
<div class="flex justify-center mt-10">
<div class="flex flex-col">
<div class="flex flex-row">
<div class="flex flex-col rounded">
<div class="flex w-full flex-col mb-10 border border-l-0">
<div class="flex w-24 my-1">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mb-10 border border-l-0">
<div class="flex w-24 my-1">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mb-10 border border-l-0">
<div class="flex w-24 my-1">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mb-10 border border-l-0">
<div class="flex w-24 my-1">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
</div>
<div class="flex flex-col mt-8">
<div class="flex w-full flex-col border border-l-0">
<div class="flex w-24 my-1 mb-12">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mt-24 border border-l-0">
<div class="flex w-24 my-1 mb-14">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
</div>
<div class="flex flex-col mt-20">
<div class="flex w-full flex-col border border-l-0">
<div class="flex w-24 my-1 mb-40">Team 1</div>
<div class="flex w-24 my-1">Team 2</div>
</div>
</div>
<div class="flex flex-col mt-40">
<div class="flex w-full flex-col border-b">
<div class="flex w-24 my-1">Team 1</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center flex-col">
<div class="flex w-24 border-b my-1 justify-center">winner</div>
</div>
<div class="flex flex-col">
<div class="flex flex-row flex-row-reverse">
<div class="flex flex-col">
<div class="flex w-full flex-col mb-10 border border-r-0">
<div class="flex w-24 justify-end my-1">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mb-10 border border-r-0">
<div class="flex w-24 justify-end my-1">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mb-10 border border-r-0">
<div class="flex w-24 justify-end my-1">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mb-10 border border-r-0">
<div class="flex w-24 justify-end my-1">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
</div>
<div class="flex flex-col mt-8">
<div class="flex w-full flex-col border border-r-0">
<div class="flex w-24 justify-end my-1 mb-12">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
<div class="flex w-full flex-col mt-24 border border-r-0">
<div class="flex w-24 justify-end my-1 mb-14">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
</div>
<div class="flex flex-col mt-20">
<div class="flex w-full flex-col border border-r-0">
<div class="flex w-24 justify-end my-1 mb-40">Team 1</div>
<div class="flex w-24 justify-end my-1">Team 2</div>
</div>
</div>
<div class="flex flex-col mt-40">
<div class="flex w-full flex-col border-b">
<div class="flex w-24 justify-end my-1">Team 1</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment