Skip to content

Instantly share code, notes, and snippets.

@Loupeznik
Last active June 24, 2024 14:11
Show Gist options
  • Save Loupeznik/c533632468b02ce9c9f30c1f0f5d8fae to your computer and use it in GitHub Desktop.
Save Loupeznik/c533632468b02ce9c9f30c1f0f5d8fae to your computer and use it in GitHub Desktop.
Playoffs bracket Tailwind component
<div class="m-2 p-4">
<div class="mb-4 grid grid-flow-col grid-cols-3 items-center border-0 border-b-2 border-gray-200 text-center text-base md:text-lg font-bold uppercase">
<div>Quarterfinals</div>
<div>Semifinals</div>
<div>Finals</div>
</div>
<div class="grid grid-flow-col grid-cols-3 items-center">
<div class="grid grid-flow-row grid-rows-3">
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 1</p>
<p class="text-right">2</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 2</p>
<p class="text-right">1</p>
</div>
</div>
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 3</p>
<p class="text-right">2</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 4</p>
<p class="text-right">1</p>
</div>
</div>
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 5</p>
<p class="text-right">2</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 6</p>
<p class="text-right">1</p>
</div>
</div>
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 7</p>
<p class="text-right">2</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 8</p>
<p class="text-right">1</p>
</div>
</div>
</div>
<div class="mx-2 grid h-1/2 grid-flow-row grid-rows-2">
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 1</p>
<p class="text-right">2</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 3</p>
<p class="text-right">1</p>
</div>
</div>
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 5</p>
<p class="text-right">2</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 7</p>
<p class="text-right">0</p>
</div>
</div>
</div>
<div class="mx-2 grid h-1/4 grid-flow-row grid-rows-1">
<div class="mb-4 rounded-md bg-gray-200 px-4 py-2 text-gray-900 space-y-2 text-xs md:text-base">
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 1</p>
<p class="text-right">0</p>
</div>
<div class="grid grid-flow-col grid-cols-2">
<p class="font-semibold">Player 5</p>
<p class="text-right">2</p>
</div>
</div>
</div>
</div>
</div>
@Loupeznik
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment