triangles.fun/src/Components/Tailwind.svelte

<style global>
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  .div0 {
    grid-area: 1 / 5;
    margin-left: -80px;
  }
  .div1 {
    grid-area: 2 / 4;
    margin-left: -60px;
  }
  .div2 {
    grid-area: 2 / 6;
    margin-left: -100px;
  }
  .div3 {
    grid-area: 3 / 3;
    margin-left: -40px;
  }
  .div4 {
    grid-area: 3 / 5;
    margin-left: -80px;
  }
  .div5 {
    grid-area: 3 / 7;
    margin-left: -120px;
  }
  .div6 {
    grid-area: 4 / 2;
    margin-left: -20px;
  }
  .div7 {
    grid-area: 4 / 4;
    margin-left: -60px;
  }
  .div8 {
    grid-area: 4 / 6;
    margin-left: -100px;
  }
  .div9 {
    grid-area: 4 / 8;
    margin-left: -140px;
  }
  .div10 {
    grid-area: 5 / 1;
    margin-left: 0px;
  }
  .div11 {
    grid-area: 5 / 3;
    margin-left: -40px;
  }
  .div12 {
    grid-area: 5 / 5;
    margin-left: -80px;
  }
  .div13 {
    grid-area: 5 / 7;
    margin-left: -120px;
  }
  .div14 {
    grid-area: 5 / 9;
    margin-left: -160px;
  }

  .green {
    background-color: hsl(92, 28%, 65%);
  }

  .green-lighter {
    background-color: hsl(92, 28%, 85%);
  }

  .green-darker {
    background-color: hsl(92, 28%, 30%);
  }

  .cyan {
    background-color: hsl(179, 25%, 65%);
  }

  .cyan-lighter {
    background-color: hsl(179, 25%, 85%);
  }

  .cyan-darker {
    background-color: hsl(179, 25%, 30%);
  }

  .blue {
    background-color: hsl(210, 34%, 63%);
  }

  .blue-lighter {
    background-color: hsl(213, 32%, 82%);
  }

  .blue-darker {
    background-color: hsl(213, 32%, 37%);
  }

  .yellow {
    background-color: hsl(40, 71%, 73%);
  }

  .yellow-lighter {
    background-color: hsl(40, 71%, 88%);
  }

  .yellow-darker {
    background-color: hsl(40, 71%, 37%);
  }

  .orange {
    background-color: hsl(14, 51%, 63%);
  }

  .orange-lighter {
    background-color: hsl(14, 51%, 83%);
  }

  .orange-darker {
    background-color: hsl(14, 51%, 28%);
  }

  .red {
    background-color: hsl(354, 42%, 56%);
  }

  .red-lighter {
    background-color: hsl(354, 42%, 76%);
  }

  .red-darker {
    background-color: hsl(354, 42%, 28%);
  }

  .purple {
    background-color: hsl(311, 20%, 63%);
  }

  .purple-lighter {
    background-color: hsl(311, 20%, 83%);
  }

  .purple-darker {
    background-color: hsl(311, 20%, 28%);
  }
</style>