neisdev/index.html

## index.html
<body class="bg-cream text-charcoal min-h-screen font-sans leading-normal overflow-x-hidden lg:overflow-auto">
  <main class="flex-1 md:p-0 lg:pt-8 lg:px-8 md:ml-24 flex flex-col">
  <section class="bg-cream-lighter p-4 shadow">
  <div class="md:flex">
    <h2 class="md:w-1/3 uppercase tracking-wide text-sm sm:text-lg mb-6">Create New Location</h2>
  </div>
  <form>
    <div class="md:flex mb-8">
      <div class="md:w-1/3">
        <legend class="uppercase tracking-wide text-sm">Location</legend>
        <p class="text-xs font-light text-red">This entire section is required.</p>
      </div>
    <div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
      <div class="mb-4">
        <label class="block uppercase tracking-wide text-xs font-bold">Name</label>
        <input class="w-full shadow-inner p-4 border-0" type="text" name="name" placeholder="Acme Mfg. Co.">
      </div>
      <div class="md:flex mb-4">
        <div class="md:flex-1 md:pr-3">
          <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Street Address</label>
          <input class="w-full shadow-inner p-4 border-0" type="text" name="address_street" placeholder="555 Roadrunner Lane">
        </div>
        <div class="md:flex-1 md:pl-3">
          <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Building/Suite No.</label>
          <input class="w-full shadow-inner p-4 border-0" type="text" name="address_number" placeholder="#3">
          <span class="text-xs mb-4 font-thin">We lied, this isn't required.</span>
        </div>
      </div>
      <div class="md:flex mb-4">
        <div class="md:flex-1 md:pr-3">
            <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Latitude</label>
            <input class="w-full shadow-inner p-4 border-0" type="text" name="lat" placeholder="30.0455542">
          </div>
          <div class="md:flex-1 md:pl-3">
            <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Longitude</label>
            <input class="w-full shadow-inner p-4 border-0" type="text" name="lon" placeholder="-99.1405168">
          </div>
        </div>
      </div>
    </div>
    <div class="md:flex mb-8">
      <div class="md:w-1/3">
        <legend class="uppercase tracking-wide text-sm">Contact</legend>
      </div>
      <div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
        <div class="mb-4">
          <label class="block uppercase tracking-wide text-xs font-bold">Phone</label>
          <input class="w-full shadow-inner p-4 border-0" type="tel" name="phone" placeholder="(555) 555-5555">
        </div>
        <div class="mb-4">
          <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">URL</label>
          <input class="w-full shadow-inner p-4 border-0" type="url" name="url" placeholder="acme.co">
        </div>
        <div class="mb-4">
          <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Email</label>
          <input class="w-full shadow-inner p-4 border-0" type="email" name="email" placeholder="contact@acme.co">
        </div>
      </div>
    </div>
    <div class="md:flex">
      <div class="md:w-1/3">
        <legend class="uppercase tracking-wide text-sm">Social</legend>
      </div>
      <div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
        <div class="md:flex mb-4">
          <div class="md:flex-1 md:pr-3">
            <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Facebook</label>
            <div class="w-full flex">
              <span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">facebook.com/</span>
              <input class="flex-1 shadow-inner p-4 border-0" type="text" name="facebook" placeholder="acmeco">
            </div>
          </div>
          <div class="md:flex-1 md:pl-3 mt-2 md:mt-0">
            <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Twitter</label>
            <div class="w-full flex">
              <span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">twitter.com/</span>
              <input class="flex-1 shadow-inner p-4 border-0" type="text" name="twitter" placeholder="acmeco">
            </div>
          </div>
        </div>
        <div class="md:flex mb-4">
          <div class="md:flex-1 md:pr-3">
            <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Instagram</label>
            <div class="w-full flex">
              <span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">instagram.com/</span>
              <input class="flex-1 shadow-inner p-4 border-0" type="text" name="instagram" placeholder="acmeco">
            </div>
          </div>
          <div class="md:flex-1 md:pl-3 mt-2 md:mt-0">
            <label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Yelp</label>
              <div class="w-full flex">
                <span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">yelp.com/</span>
                <input class="flex-1 shadow-inner p-4 border-0" type="text" name="yelp" placeholder="acmeco">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md:flex mb-6">
        <div class="md:w-1/3">
          <legend class="uppercase tracking-wide text-sm">Description</legend>
        </div>
        <div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
          <textarea class="w-full shadow-inner p-4 border-0" placeholder="We build fine acmes." rows="6"></textarea>
        </div>
      </div>
      <div class="md:flex mb-6">
        <div class="md:w-1/3">
          <legend class="uppercase tracking-wide text-sm">Cover Image</legend>
        </div>
        <div class="md:flex-1 px-3 text-center">
          <div class="button bg-gold hover:bg-gold-dark text-cream mx-auto cusor-pointer relative">
            <input class="opacity-0 absolute pin-x pin-y" type="file" name="cover_image">
            Add Cover Image
          </div>
        </div>
      </div>
      <div class="md:flex mb-6 border border-t-1 border-b-0 border-x-0 border-cream-dark">
        <div class="md:flex-1 px-3 text-center md:text-right">
          <input type="hidden" name="sponsor" value="0">
          <input class="button text-cream-lighter bg-brick hover:bg-brick-dark" type="submit" value="Create Location">
        </div>
      </div>
    </form>
  </section>
  </main>
</body>

## style.postcss
.shadow-light,
.hover\:shadow-light:hover {
  text-shadow: 1px 1px 0 rgba(244, 244, 240, 1), 2px 2px 0 rgba(81, 76, 77, .3);
}

input:focus,
textarea:focus {
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
  outline: none;
 }

.button {
  @apply .inline-block .mt-6 .rounded .shadow .py-2 .px-4 .no-underline .border-0;
}

/* @apply doesn't work on code pen. */
/* The above renders out to: */
.button {
    display: inline-block;
    margin-top: 1.5rem;
    border-radius: .25rem;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none;
    border: 0;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.border-x-0 {
  border-left: 0;
  border-right: 0;
}

.border-y-0 {
  border-top: 0;
  border-bottom: 0;
}

.hover\:shadow:hover {
  @apply .shadow;
}


// Custom stuffs from my tailwind.js
.bg-brick-lightest,
.hover\:bg-brick-lightest:hover {
  background-color: #dbcdcc;
}

.bg-brick-lighter,
.hover\:bg-brick-lighter:hover {
  background-color: #c2a3a0;
}

.bg-brick-light,
.hover\:bg-brick-light:hover {
  background-color: #aa7f7b;
}

.bg-brick,
.hover\:bg-brick:hover {
  background-color: #93625b;
}

.bg-brick-dark,
.hover\:bg-brick-dark:hover {
  background-color: #75413f;
}

.bg-brick-darker,
.hover\:bg-brick-darker:hover {
  background-color: #421e1b;
}

.bg-brick-darkest,
.hover\:bg-brick-darkest:hover {
  background-color: #260d0c;
}

.bg-cream-lightest,
.hover\:bg-cream-lightest:hover {
  background-color: #fff;
}

.bg-cream-lighter,
.hover\:bg-cream-lighter:hover {
  background-color: #f9f9fa;
}

.bg-cream-light,
.hover\:bg-cream-light:hover {
  background-color: #f4f4f5;
}

.bg-cream,
.hover\:bg-cream:hover {
  background-color: #f4f4f0;
}

.bg-cream-dark,
.hover\:bg-cream-dark:hover {
  background-color: #d9d5c3;
}

.bg-cream-darker,
.hover\:bg-cream-darker:hover {
  background-color: #bfba99;
}

.bg-cream-darkest,
.hover\:bg-cream-darkest:hover {
  background-color: #a39a73;
}

.bg-charcoal-lightest,
.hover\:bg-charcoal-lightest:hover {
  background-color: #969696;
}

.bg-charcoal-lighter,
.hover\:bg-charcoal-lighter:hover {
  background-color: #7f7f7f;
}

.bg-charcoal-light,
.hover\:bg-charcoal-light:hover {
  background-color: #686868;
}

.bg-charcoal,
.hover\:bg-charcoal:hover {
  background-color: #514c4d;
}

.bg-charcoal-dark,
.hover\:bg-charcoal-dark:hover {
  background-color: #332b2d;
}

.bg-charcoal-darker,
.hover\:bg-charcoal-darker:hover {
  background-color: #1a1416;
}

.bg-charcoal-darkest,
.hover\:bg-charcoal-darkest:hover {
  background-color: #0c090a;
}

.bg-gold-lightest,
.hover\:bg-gold-lightest:hover {
  background-color: #e0e0e0;
}

.bg-gold-lighter,
.hover\:bg-gold-lighter:hover {
  background-color: #c9c9c9;
}

.bg-gold-light,
.hover\:bg-gold-light:hover {
  background-color: #b0ada7;
}

.bg-gold,
.hover\:bg-gold:hover {
  background-color: #989488;
}

.bg-gold-dark,
.hover\:bg-gold-dark:hover {
  background-color: #7c7664;
}

.bg-gold-darker,
.hover\:bg-gold-darker:hover {
  background-color: #635a46;
}

.bg-gold-darkest,
.hover\:bg-gold-darkest:hover {
  background-color: #473e2b;
}


  .sm\:text-brick-lightest,
  .sm\:hover\:text-brick-lightest:hover {
    color: #dbcdcc;
  }

  .sm\:text-brick-lighter,
  .sm\:hover\:text-brick-lighter:hover {
    color: #c2a3a0;
  }

  .sm\:text-brick-light,
  .sm\:hover\:text-brick-light:hover {
    color: #aa7f7b;
  }

  .sm\:text-brick,
  .sm\:hover\:text-brick:hover {
    color: #93625b;
  }

  .sm\:text-brick-dark,
  .sm\:hover\:text-brick-dark:hover {
    color: #75413f;
  }

  .sm\:text-brick-darker,
  .sm\:hover\:text-brick-darker:hover {
    color: #421e1b;
  }

  .sm\:text-brick-darkest,
  .sm\:hover\:text-brick-darkest:hover {
    color: #260d0c;
  }

  .sm\:text-cream-lightest,
  .sm\:hover\:text-cream-lightest:hover {
    color: #fff;
  }

  .sm\:text-cream-lighter,
  .sm\:hover\:text-cream-lighter:hover {
    color: #f9f9fa;
  }

  .sm\:text-cream-light,
  .sm\:hover\:text-cream-light:hover {
    color: #f4f4f5;
  }

  .sm\:text-cream,
  .sm\:hover\:text-cream:hover {
    color: #f4f4f0;
  }

  .sm\:text-cream-dark,
  .sm\:hover\:text-cream-dark:hover {
    color: #d9d5c3;
  }

  .sm\:text-cream-darker,
  .sm\:hover\:text-cream-darker:hover {
    color: #bfba99;
  }

  .sm\:text-cream-darkest,
  .sm\:hover\:text-cream-darkest:hover {
    color: #a39a73;
  }

  .sm\:text-charcoal-lightest,
  .sm\:hover\:text-charcoal-lightest:hover {
    color: #969696;
  }

  .sm\:text-charcoal-lighter,
  .sm\:hover\:text-charcoal-lighter:hover {
    color: #7f7f7f;
  }

  .sm\:text-charcoal-light,
  .sm\:hover\:text-charcoal-light:hover {
    color: #686868;
  }

  .sm\:text-charcoal,
  .sm\:hover\:text-charcoal:hover {
    color: #514c4d;
  }

  .sm\:text-charcoal-dark,
  .sm\:hover\:text-charcoal-dark:hover {
    color: #332b2d;
  }

  .sm\:text-charcoal-darker,
  .sm\:hover\:text-charcoal-darker:hover {
    color: #1a1416;
  }

  .sm\:text-charcoal-darkest,
  .sm\:hover\:text-charcoal-darkest:hover {
    color: #0c090a;
  }

  .sm\:text-gold-lightest,
  .sm\:hover\:text-gold-lightest:hover {
    color: #e0e0e0;
  }

  .sm\:text-gold-lighter,
  .sm\:hover\:text-gold-lighter:hover {
    color: #c9c9c9;
  }

  .sm\:text-gold-light,
  .sm\:hover\:text-gold-light:hover {
    color: #b0ada7;
  }

  .sm\:text-gold,
  .sm\:hover\:text-gold:hover {
    color: #989488;
  }

  .sm\:text-gold-dark,
  .sm\:hover\:text-gold-dark:hover {
    color: #7c7664;
  }

  .sm\:text-gold-darker,
  .sm\:hover\:text-gold-darker:hover {
    color: #635a46;
  }

  .sm\:text-gold-darkest,
  .sm\:hover\:text-gold-darkest:hover {
    color: #473e2b;
  }

.md\:text-brick-lightest,
  .md\:hover\:text-brick-lightest:hover {
    color: #dbcdcc;
  }

  .md\:text-brick-lighter,
  .md\:hover\:text-brick-lighter:hover {
    color: #c2a3a0;
  }

  .md\:text-brick-light,
  .md\:hover\:text-brick-light:hover {
    color: #aa7f7b;
  }

  .md\:text-brick,
  .md\:hover\:text-brick:hover {
    color: #93625b;
  }

  .md\:text-brick-dark,
  .md\:hover\:text-brick-dark:hover {
    color: #75413f;
  }

  .md\:text-brick-darker,
  .md\:hover\:text-brick-darker:hover {
    color: #421e1b;
  }

  .md\:text-brick-darkest,
  .md\:hover\:text-brick-darkest:hover {
    color: #260d0c;
  }

  .md\:text-cream-lightest,
  .md\:hover\:text-cream-lightest:hover {
    color: #fff;
  }

  .md\:text-cream-lighter,
  .md\:hover\:text-cream-lighter:hover {
    color: #f9f9fa;
  }

  .md\:text-cream-light,
  .md\:hover\:text-cream-light:hover {
    color: #f4f4f5;
  }

  .md\:text-cream,
  .md\:hover\:text-cream:hover {
    color: #f4f4f0;
  }

  .md\:text-cream-dark,
  .md\:hover\:text-cream-dark:hover {
    color: #d9d5c3;
  }

  .md\:text-cream-darker,
  .md\:hover\:text-cream-darker:hover {
    color: #bfba99;
  }

  .md\:text-cream-darkest,
  .md\:hover\:text-cream-darkest:hover {
    color: #a39a73;
  }

  .md\:text-charcoal-lightest,
  .md\:hover\:text-charcoal-lightest:hover {
    color: #969696;
  }

  .md\:text-charcoal-lighter,
  .md\:hover\:text-charcoal-lighter:hover {
    color: #7f7f7f;
  }

  .md\:text-charcoal-light,
  .md\:hover\:text-charcoal-light:hover {
    color: #686868;
  }

  .md\:text-charcoal,
  .md\:hover\:text-charcoal:hover {
    color: #514c4d;
  }

  .md\:text-charcoal-dark,
  .md\:hover\:text-charcoal-dark:hover {
    color: #332b2d;
  }

  .md\:text-charcoal-darker,
  .md\:hover\:text-charcoal-darker:hover {
    color: #1a1416;
  }

  .md\:text-charcoal-darkest,
  .md\:hover\:text-charcoal-darkest:hover {
    color: #0c090a;
  }

  .md\:text-gold-lightest,
  .md\:hover\:text-gold-lightest:hover {
    color: #e0e0e0;
  }

  .md\:text-gold-lighter,
  .md\:hover\:text-gold-lighter:hover {
    color: #c9c9c9;
  }

  .md\:text-gold-light,
  .md\:hover\:text-gold-light:hover {
    color: #b0ada7;
  }

  .md\:text-gold,
  .md\:hover\:text-gold:hover {
    color: #989488;
  }

  .md\:text-gold-dark,
  .md\:hover\:text-gold-dark:hover {
    color: #7c7664;
  }

  .md\:text-gold-darker,
  .md\:hover\:text-gold-darker:hover {
    color: #635a46;
  }

  .md\:text-gold-darkest,
  .md\:hover\:text-gold-darkest:hover {
    color: #473e2b;
  }

.lg\:text-brick-lightest,
  .lg\:hover\:text-brick-lightest:hover {
    color: #dbcdcc;
  }

  .lg\:text-brick-lighter,
  .lg\:hover\:text-brick-lighter:hover {
    color: #c2a3a0;
  }

  .lg\:text-brick-light,
  .lg\:hover\:text-brick-light:hover {
    color: #aa7f7b;
  }

  .lg\:text-brick,
  .lg\:hover\:text-brick:hover {
    color: #93625b;
  }

  .lg\:text-brick-dark,
  .lg\:hover\:text-brick-dark:hover {
    color: #75413f;
  }

  .lg\:text-brick-darker,
  .lg\:hover\:text-brick-darker:hover {
    color: #421e1b;
  }

  .lg\:text-brick-darkest,
  .lg\:hover\:text-brick-darkest:hover {
    color: #260d0c;
  }

  .lg\:text-cream-lightest,
  .lg\:hover\:text-cream-lightest:hover {
    color: #fff;
  }

  .lg\:text-cream-lighter,
  .lg\:hover\:text-cream-lighter:hover {
    color: #f9f9fa;
  }

  .lg\:text-cream-light,
  .lg\:hover\:text-cream-light:hover {
    color: #f4f4f5;
  }

  .lg\:text-cream,
  .lg\:hover\:text-cream:hover {
    color: #f4f4f0;
  }

  .lg\:text-cream-dark,
  .lg\:hover\:text-cream-dark:hover {
    color: #d9d5c3;
  }

  .lg\:text-cream-darker,
  .lg\:hover\:text-cream-darker:hover {
    color: #bfba99;
  }

  .lg\:text-cream-darkest,
  .lg\:hover\:text-cream-darkest:hover {
    color: #a39a73;
  }

  .lg\:text-charcoal-lightest,
  .lg\:hover\:text-charcoal-lightest:hover {
    color: #969696;
  }

  .lg\:text-charcoal-lighter,
  .lg\:hover\:text-charcoal-lighter:hover {
    color: #7f7f7f;
  }

  .lg\:text-charcoal-light,
  .lg\:hover\:text-charcoal-light:hover {
    color: #686868;
  }

  .lg\:text-charcoal,
  .lg\:hover\:text-charcoal:hover {
    color: #514c4d;
  }

  .lg\:text-charcoal-dark,
  .lg\:hover\:text-charcoal-dark:hover {
    color: #332b2d;
  }

  .lg\:text-charcoal-darker,
  .lg\:hover\:text-charcoal-darker:hover {
    color: #1a1416;
  }

  .lg\:text-charcoal-darkest,
  .lg\:hover\:text-charcoal-darkest:hover {
    color: #0c090a;
  }

  .lg\:text-gold-lightest,
  .lg\:hover\:text-gold-lightest:hover {
    color: #e0e0e0;
  }

  .lg\:text-gold-lighter,
  .lg\:hover\:text-gold-lighter:hover {
    color: #c9c9c9;
  }

  .lg\:text-gold-light,
  .lg\:hover\:text-gold-light:hover {
    color: #b0ada7;
  }

  .lg\:text-gold,
  .lg\:hover\:text-gold:hover {
    color: #989488;
  }

  .lg\:text-gold-dark,
  .lg\:hover\:text-gold-dark:hover {
    color: #7c7664;
  }

  .lg\:text-gold-darker,
  .lg\:hover\:text-gold-darker:hover {
    color: #635a46;
  }

  .lg\:text-gold-darkest,
  .lg\:hover\:text-gold-darkest:hover {
    color: #473e2b;
  }

.xl\:text-brick-lightest,
  .xl\:hover\:text-brick-lightest:hover {
    color: #dbcdcc;
  }

  .xl\:text-brick-lighter,
  .xl\:hover\:text-brick-lighter:hover {
    color: #c2a3a0;
  }

  .xl\:text-brick-light,
  .xl\:hover\:text-brick-light:hover {
    color: #aa7f7b;
  }

  .xl\:text-brick,
  .xl\:hover\:text-brick:hover {
    color: #93625b;
  }

  .xl\:text-brick-dark,
  .xl\:hover\:text-brick-dark:hover {
    color: #75413f;
  }

  .xl\:text-brick-darker,
  .xl\:hover\:text-brick-darker:hover {
    color: #421e1b;
  }

  .xl\:text-brick-darkest,
  .xl\:hover\:text-brick-darkest:hover {
    color: #260d0c;
  }

  .xl\:text-cream-lightest,
  .xl\:hover\:text-cream-lightest:hover {
    color: #fff;
  }

  .xl\:text-cream-lighter,
  .xl\:hover\:text-cream-lighter:hover {
    color: #f9f9fa;
  }

  .xl\:text-cream-light,
  .xl\:hover\:text-cream-light:hover {
    color: #f4f4f5;
  }

  .xl\:text-cream,
  .xl\:hover\:text-cream:hover {
    color: #f4f4f0;
  }

  .xl\:text-cream-dark,
  .xl\:hover\:text-cream-dark:hover {
    color: #d9d5c3;
  }

  .xl\:text-cream-darker,
  .xl\:hover\:text-cream-darker:hover {
    color: #bfba99;
  }

  .xl\:text-cream-darkest,
  .xl\:hover\:text-cream-darkest:hover {
    color: #a39a73;
  }

  .xl\:text-charcoal-lightest,
  .xl\:hover\:text-charcoal-lightest:hover {
    color: #969696;
  }

  .xl\:text-charcoal-lighter,
  .xl\:hover\:text-charcoal-lighter:hover {
    color: #7f7f7f;
  }

  .xl\:text-charcoal-light,
  .xl\:hover\:text-charcoal-light:hover {
    color: #686868;
  }

  .xl\:text-charcoal,
  .xl\:hover\:text-charcoal:hover {
    color: #514c4d;
  }

  .xl\:text-charcoal-dark,
  .xl\:hover\:text-charcoal-dark:hover {
    color: #332b2d;
  }

  .xl\:text-charcoal-darker,
  .xl\:hover\:text-charcoal-darker:hover {
    color: #1a1416;
  }

  .xl\:text-charcoal-darkest,
  .xl\:hover\:text-charcoal-darkest:hover {
    color: #0c090a;
  }

  .xl\:text-gold-lightest,
  .xl\:hover\:text-gold-lightest:hover {
    color: #e0e0e0;
  }

  .xl\:text-gold-lighter,
  .xl\:hover\:text-gold-lighter:hover {
    color: #c9c9c9;
  }

  .xl\:text-gold-light,
  .xl\:hover\:text-gold-light:hover {
    color: #b0ada7;
  }

  .xl\:text-gold,
  .xl\:hover\:text-gold:hover {
    color: #989488;
  }

  .xl\:text-gold-dark,
  .xl\:hover\:text-gold-dark:hover {
    color: #7c7664;
  }

  .xl\:text-gold-darker,
  .xl\:hover\:text-gold-darker:hover {
    color: #635a46;
  }

  .xl\:text-gold-darkest,
  .xl\:hover\:text-gold-darkest:hover {
    color: #473e2b;
  }

.text-brick-lightest,
.hover\:text-brick-lightest:hover {
  color: #dbcdcc;
}

.text-brick-lighter,
.hover\:text-brick-lighter:hover {
  color: #c2a3a0;
}

.text-brick-light,
.hover\:text-brick-light:hover {
  color: #aa7f7b;
}

.text-brick,
.hover\:text-brick:hover {
  color: #93625b;
}

.text-brick-dark,
.hover\:text-brick-dark:hover {
  color: #75413f;
}

.text-brick-darker,
.hover\:text-brick-darker:hover {
  color: #421e1b;
}

.text-brick-darkest,
.hover\:text-brick-darkest:hover {
  color: #260d0c;
}

.text-cream-lightest,
.hover\:text-cream-lightest:hover {
  color: #fff;
}

.text-cream-lighter,
.hover\:text-cream-lighter:hover {
  color: #f9f9fa;
}

.text-cream-light,
.hover\:text-cream-light:hover {
  color: #f4f4f5;
}

.text-cream,
.hover\:text-cream:hover {
  color: #f4f4f0;
}

.text-cream-dark,
.hover\:text-cream-dark:hover {
  color: #d9d5c3;
}

.text-cream-darker,
.hover\:text-cream-darker:hover {
  color: #bfba99;
}

.text-cream-darkest,
.hover\:text-cream-darkest:hover {
  color: #a39a73;
}

.text-charcoal-lightest,
.hover\:text-charcoal-lightest:hover {
  color: #969696;
}

.text-charcoal-lighter,
.hover\:text-charcoal-lighter:hover {
  color: #7f7f7f;
}

.text-charcoal-light,
.hover\:text-charcoal-light:hover {
  color: #686868;
}

.text-charcoal,
.hover\:text-charcoal:hover {
  color: #514c4d;
}

.text-charcoal-dark,
.hover\:text-charcoal-dark:hover {
  color: #332b2d;
}

.text-charcoal-darker,
.hover\:text-charcoal-darker:hover {
  color: #1a1416;
}

.text-charcoal-darkest,
.hover\:text-charcoal-darkest:hover {
  color: #0c090a;
}

.text-gold-lightest,
.hover\:text-gold-lightest:hover {
  color: #e0e0e0;
}

.text-gold-lighter,
.hover\:text-gold-lighter:hover {
  color: #c9c9c9;
}

.text-gold-light,
.hover\:text-gold-light:hover {
  color: #b0ada7;
}

.text-gold,
.hover\:text-gold:hover {
  color: #989488;
}

.text-gold-dark,
.hover\:text-gold-dark:hover {
  color: #7c7664;
}

.text-gold-darker,
.hover\:text-gold-darker:hover {
  color: #635a46;
}

.text-gold-darkest,
.hover\:text-gold-darkest:hover {
  color: #473e2b;
}

## styles
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />

## tailwind-form.markdown

      
    Raw
  

              tailwind-form.markdown
            
          
    Tailwind Form

Giving Tailwind.css a go in a new site I'm building. Added a few custom classes, as well as some rendered css that was built from the tailwind.js config file. Had to fudge one of the components, but I left the original with the @apply feature for prosperity.
A Pen by Ramene Anthony on CodePen.
License.
	<body class="bg-cream text-charcoal min-h-screen font-sans leading-normal overflow-x-hidden lg:overflow-auto">
	<main class="flex-1 md:p-0 lg:pt-8 lg:px-8 md:ml-24 flex flex-col">
	<section class="bg-cream-lighter p-4 shadow">
	<div class="md:flex">
	<h2 class="md:w-1/3 uppercase tracking-wide text-sm sm:text-lg mb-6">Create New Location</h2>
	</div>
	<form>
	<div class="md:flex mb-8">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Location</legend>
	<p class="text-xs font-light text-red">This entire section is required.</p>
	</div>
	<div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
	<div class="mb-4">
	<label class="block uppercase tracking-wide text-xs font-bold">Name</label>
	<input class="w-full shadow-inner p-4 border-0" type="text" name="name" placeholder="Acme Mfg. Co.">
	</div>
	<div class="md:flex mb-4">
	<div class="md:flex-1 md:pr-3">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Street Address</label>
	<input class="w-full shadow-inner p-4 border-0" type="text" name="address_street" placeholder="555 Roadrunner Lane">
	</div>
	<div class="md:flex-1 md:pl-3">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Building/Suite No.</label>
	<input class="w-full shadow-inner p-4 border-0" type="text" name="address_number" placeholder="#3">
	<span class="text-xs mb-4 font-thin">We lied, this isn't required.</span>
	</div>
	</div>
	<div class="md:flex mb-4">
	<div class="md:flex-1 md:pr-3">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Latitude</label>
	<input class="w-full shadow-inner p-4 border-0" type="text" name="lat" placeholder="30.0455542">
	</div>
	<div class="md:flex-1 md:pl-3">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Longitude</label>
	<input class="w-full shadow-inner p-4 border-0" type="text" name="lon" placeholder="-99.1405168">
	</div>
	</div>
	</div>
	</div>
	<div class="md:flex mb-8">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Contact</legend>
	</div>
	<div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
	<div class="mb-4">
	<label class="block uppercase tracking-wide text-xs font-bold">Phone</label>
	<input class="w-full shadow-inner p-4 border-0" type="tel" name="phone" placeholder="(555) 555-5555">
	</div>
	<div class="mb-4">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">URL</label>
	<input class="w-full shadow-inner p-4 border-0" type="url" name="url" placeholder="acme.co">
	</div>
	<div class="mb-4">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Email</label>
	<input class="w-full shadow-inner p-4 border-0" type="email" name="email" placeholder="contact@acme.co">
	</div>
	</div>
	</div>
	<div class="md:flex">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Social</legend>
	</div>
	<div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
	<div class="md:flex mb-4">
	<div class="md:flex-1 md:pr-3">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Facebook</label>
	<div class="w-full flex">
	<span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">facebook.com/</span>
	<input class="flex-1 shadow-inner p-4 border-0" type="text" name="facebook" placeholder="acmeco">
	</div>
	</div>
	<div class="md:flex-1 md:pl-3 mt-2 md:mt-0">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Twitter</label>
	<div class="w-full flex">
	<span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">twitter.com/</span>
	<input class="flex-1 shadow-inner p-4 border-0" type="text" name="twitter" placeholder="acmeco">
	</div>
	</div>
	</div>
	<div class="md:flex mb-4">
	<div class="md:flex-1 md:pr-3">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Instagram</label>
	<div class="w-full flex">
	<span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">instagram.com/</span>
	<input class="flex-1 shadow-inner p-4 border-0" type="text" name="instagram" placeholder="acmeco">
	</div>
	</div>
	<div class="md:flex-1 md:pl-3 mt-2 md:mt-0">
	<label class="block uppercase tracking-wide text-charcoal-darker text-xs font-bold">Yelp</label>
	<div class="w-full flex">
	<span class="text-xs py-4 px-2 bg-grey-light text-grey-dark">yelp.com/</span>
	<input class="flex-1 shadow-inner p-4 border-0" type="text" name="yelp" placeholder="acmeco">
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="md:flex mb-6">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Description</legend>
	</div>
	<div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
	<textarea class="w-full shadow-inner p-4 border-0" placeholder="We build fine acmes." rows="6"></textarea>
	</div>
	</div>
	<div class="md:flex mb-6">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Cover Image</legend>
	</div>
	<div class="md:flex-1 px-3 text-center">
	<div class="button bg-gold hover:bg-gold-dark text-cream mx-auto cusor-pointer relative">
	<input class="opacity-0 absolute pin-x pin-y" type="file" name="cover_image">
	Add Cover Image
	</div>
	</div>
	</div>
	<div class="md:flex mb-6 border border-t-1 border-b-0 border-x-0 border-cream-dark">
	<div class="md:flex-1 px-3 text-center md:text-right">
	<input type="hidden" name="sponsor" value="0">
	<input class="button text-cream-lighter bg-brick hover:bg-brick-dark" type="submit" value="Create Location">
	</div>
	</div>
	</form>
	</section>
	</main>
	</body>
	.shadow-light,
	.hover\:shadow-light:hover {
	text-shadow: 1px 1px 0 rgba(244, 244, 240, 1), 2px 2px 0 rgba(81, 76, 77, .3);
	}

	input:focus,
	textarea:focus {
	box-shadow: inset 0 0 6px rgba(0,0,0,.4);
	outline: none;
	}

	.button {
	@apply .inline-block .mt-6 .rounded .shadow .py-2 .px-4 .no-underline .border-0;
	}

	/* @apply doesn't work on code pen. */
	/* The above renders out to: */
	.button {
	display: inline-block;
	margin-top: 1.5rem;
	border-radius: .25rem;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	text-decoration: none;
	border: 0;
	}

	.overflow-y-hidden {
	overflow-y: hidden;
	}

	.overflow-x-hidden {
	overflow-x: hidden;
	}

	.border-x-0 {
	border-left: 0;
	border-right: 0;
	}

	.border-y-0 {
	border-top: 0;
	border-bottom: 0;
	}

	.hover\:shadow:hover {
	@apply .shadow;
	}


	// Custom stuffs from my tailwind.js
	.bg-brick-lightest,
	.hover\:bg-brick-lightest:hover {
	background-color: #dbcdcc;
	}

	.bg-brick-lighter,
	.hover\:bg-brick-lighter:hover {
	background-color: #c2a3a0;
	}

	.bg-brick-light,
	.hover\:bg-brick-light:hover {
	background-color: #aa7f7b;
	}

	.bg-brick,
	.hover\:bg-brick:hover {
	background-color: #93625b;
	}

	.bg-brick-dark,
	.hover\:bg-brick-dark:hover {
	background-color: #75413f;
	}

	.bg-brick-darker,
	.hover\:bg-brick-darker:hover {
	background-color: #421e1b;
	}

	.bg-brick-darkest,
	.hover\:bg-brick-darkest:hover {
	background-color: #260d0c;
	}

	.bg-cream-lightest,
	.hover\:bg-cream-lightest:hover {
	background-color: #fff;
	}

	.bg-cream-lighter,
	.hover\:bg-cream-lighter:hover {
	background-color: #f9f9fa;
	}

	.bg-cream-light,
	.hover\:bg-cream-light:hover {
	background-color: #f4f4f5;
	}

	.bg-cream,
	.hover\:bg-cream:hover {
	background-color: #f4f4f0;
	}

	.bg-cream-dark,
	.hover\:bg-cream-dark:hover {
	background-color: #d9d5c3;
	}

	.bg-cream-darker,
	.hover\:bg-cream-darker:hover {
	background-color: #bfba99;
	}

	.bg-cream-darkest,
	.hover\:bg-cream-darkest:hover {
	background-color: #a39a73;
	}

	.bg-charcoal-lightest,
	.hover\:bg-charcoal-lightest:hover {
	background-color: #969696;
	}

	.bg-charcoal-lighter,
	.hover\:bg-charcoal-lighter:hover {
	background-color: #7f7f7f;
	}

	.bg-charcoal-light,
	.hover\:bg-charcoal-light:hover {
	background-color: #686868;
	}

	.bg-charcoal,
	.hover\:bg-charcoal:hover {
	background-color: #514c4d;
	}

	.bg-charcoal-dark,
	.hover\:bg-charcoal-dark:hover {
	background-color: #332b2d;
	}

	.bg-charcoal-darker,
	.hover\:bg-charcoal-darker:hover {
	background-color: #1a1416;
	}

	.bg-charcoal-darkest,
	.hover\:bg-charcoal-darkest:hover {
	background-color: #0c090a;
	}

	.bg-gold-lightest,
	.hover\:bg-gold-lightest:hover {
	background-color: #e0e0e0;
	}

	.bg-gold-lighter,
	.hover\:bg-gold-lighter:hover {
	background-color: #c9c9c9;
	}

	.bg-gold-light,
	.hover\:bg-gold-light:hover {
	background-color: #b0ada7;
	}

	.bg-gold,
	.hover\:bg-gold:hover {
	background-color: #989488;
	}

	.bg-gold-dark,
	.hover\:bg-gold-dark:hover {
	background-color: #7c7664;
	}

	.bg-gold-darker,
	.hover\:bg-gold-darker:hover {
	background-color: #635a46;
	}

	.bg-gold-darkest,
	.hover\:bg-gold-darkest:hover {
	background-color: #473e2b;
	}


	.sm\:text-brick-lightest,
	.sm\:hover\:text-brick-lightest:hover {
	color: #dbcdcc;
	}

	.sm\:text-brick-lighter,
	.sm\:hover\:text-brick-lighter:hover {
	color: #c2a3a0;
	}

	.sm\:text-brick-light,
	.sm\:hover\:text-brick-light:hover {
	color: #aa7f7b;
	}

	.sm\:text-brick,
	.sm\:hover\:text-brick:hover {
	color: #93625b;
	}

	.sm\:text-brick-dark,
	.sm\:hover\:text-brick-dark:hover {
	color: #75413f;
	}

	.sm\:text-brick-darker,
	.sm\:hover\:text-brick-darker:hover {
	color: #421e1b;
	}

	.sm\:text-brick-darkest,
	.sm\:hover\:text-brick-darkest:hover {
	color: #260d0c;
	}

	.sm\:text-cream-lightest,
	.sm\:hover\:text-cream-lightest:hover {
	color: #fff;
	}

	.sm\:text-cream-lighter,
	.sm\:hover\:text-cream-lighter:hover {
	color: #f9f9fa;
	}

	.sm\:text-cream-light,
	.sm\:hover\:text-cream-light:hover {
	color: #f4f4f5;
	}

	.sm\:text-cream,
	.sm\:hover\:text-cream:hover {
	color: #f4f4f0;
	}

	.sm\:text-cream-dark,
	.sm\:hover\:text-cream-dark:hover {
	color: #d9d5c3;
	}

	.sm\:text-cream-darker,
	.sm\:hover\:text-cream-darker:hover {
	color: #bfba99;
	}

	.sm\:text-cream-darkest,
	.sm\:hover\:text-cream-darkest:hover {
	color: #a39a73;
	}

	.sm\:text-charcoal-lightest,
	.sm\:hover\:text-charcoal-lightest:hover {
	color: #969696;
	}

	.sm\:text-charcoal-lighter,
	.sm\:hover\:text-charcoal-lighter:hover {
	color: #7f7f7f;
	}

	.sm\:text-charcoal-light,
	.sm\:hover\:text-charcoal-light:hover {
	color: #686868;
	}

	.sm\:text-charcoal,
	.sm\:hover\:text-charcoal:hover {
	color: #514c4d;
	}

	.sm\:text-charcoal-dark,
	.sm\:hover\:text-charcoal-dark:hover {
	color: #332b2d;
	}

	.sm\:text-charcoal-darker,
	.sm\:hover\:text-charcoal-darker:hover {
	color: #1a1416;
	}

	.sm\:text-charcoal-darkest,
	.sm\:hover\:text-charcoal-darkest:hover {
	color: #0c090a;
	}

	.sm\:text-gold-lightest,
	.sm\:hover\:text-gold-lightest:hover {
	color: #e0e0e0;
	}

	.sm\:text-gold-lighter,
	.sm\:hover\:text-gold-lighter:hover {
	color: #c9c9c9;
	}

	.sm\:text-gold-light,
	.sm\:hover\:text-gold-light:hover {
	color: #b0ada7;
	}

	.sm\:text-gold,
	.sm\:hover\:text-gold:hover {
	color: #989488;
	}

	.sm\:text-gold-dark,
	.sm\:hover\:text-gold-dark:hover {
	color: #7c7664;
	}

	.sm\:text-gold-darker,
	.sm\:hover\:text-gold-darker:hover {
	color: #635a46;
	}

	.sm\:text-gold-darkest,
	.sm\:hover\:text-gold-darkest:hover {
	color: #473e2b;
	}

	.md\:text-brick-lightest,
	.md\:hover\:text-brick-lightest:hover {
	color: #dbcdcc;
	}

	.md\:text-brick-lighter,
	.md\:hover\:text-brick-lighter:hover {
	color: #c2a3a0;
	}

	.md\:text-brick-light,
	.md\:hover\:text-brick-light:hover {
	color: #aa7f7b;
	}

	.md\:text-brick,
	.md\:hover\:text-brick:hover {
	color: #93625b;
	}

	.md\:text-brick-dark,
	.md\:hover\:text-brick-dark:hover {
	color: #75413f;
	}

	.md\:text-brick-darker,
	.md\:hover\:text-brick-darker:hover {
	color: #421e1b;
	}

	.md\:text-brick-darkest,
	.md\:hover\:text-brick-darkest:hover {
	color: #260d0c;
	}

	.md\:text-cream-lightest,
	.md\:hover\:text-cream-lightest:hover {
	color: #fff;
	}

	.md\:text-cream-lighter,
	.md\:hover\:text-cream-lighter:hover {
	color: #f9f9fa;
	}

	.md\:text-cream-light,
	.md\:hover\:text-cream-light:hover {
	color: #f4f4f5;
	}

	.md\:text-cream,
	.md\:hover\:text-cream:hover {
	color: #f4f4f0;
	}

	.md\:text-cream-dark,
	.md\:hover\:text-cream-dark:hover {
	color: #d9d5c3;
	}

	.md\:text-cream-darker,
	.md\:hover\:text-cream-darker:hover {
	color: #bfba99;
	}

	.md\:text-cream-darkest,
	.md\:hover\:text-cream-darkest:hover {
	color: #a39a73;
	}

	.md\:text-charcoal-lightest,
	.md\:hover\:text-charcoal-lightest:hover {
	color: #969696;
	}

	.md\:text-charcoal-lighter,
	.md\:hover\:text-charcoal-lighter:hover {
	color: #7f7f7f;
	}

	.md\:text-charcoal-light,
	.md\:hover\:text-charcoal-light:hover {
	color: #686868;
	}

	.md\:text-charcoal,
	.md\:hover\:text-charcoal:hover {
	color: #514c4d;
	}

	.md\:text-charcoal-dark,
	.md\:hover\:text-charcoal-dark:hover {
	color: #332b2d;
	}

	.md\:text-charcoal-darker,
	.md\:hover\:text-charcoal-darker:hover {
	color: #1a1416;
	}

	.md\:text-charcoal-darkest,
	.md\:hover\:text-charcoal-darkest:hover {
	color: #0c090a;
	}

	.md\:text-gold-lightest,
	.md\:hover\:text-gold-lightest:hover {
	color: #e0e0e0;
	}

	.md\:text-gold-lighter,
	.md\:hover\:text-gold-lighter:hover {
	color: #c9c9c9;
	}

	.md\:text-gold-light,
	.md\:hover\:text-gold-light:hover {
	color: #b0ada7;
	}

	.md\:text-gold,
	.md\:hover\:text-gold:hover {
	color: #989488;
	}

	.md\:text-gold-dark,
	.md\:hover\:text-gold-dark:hover {
	color: #7c7664;
	}

	.md\:text-gold-darker,
	.md\:hover\:text-gold-darker:hover {
	color: #635a46;
	}

	.md\:text-gold-darkest,
	.md\:hover\:text-gold-darkest:hover {
	color: #473e2b;
	}

	.lg\:text-brick-lightest,
	.lg\:hover\:text-brick-lightest:hover {
	color: #dbcdcc;
	}

	.lg\:text-brick-lighter,
	.lg\:hover\:text-brick-lighter:hover {
	color: #c2a3a0;
	}

	.lg\:text-brick-light,
	.lg\:hover\:text-brick-light:hover {
	color: #aa7f7b;
	}

	.lg\:text-brick,
	.lg\:hover\:text-brick:hover {
	color: #93625b;
	}

	.lg\:text-brick-dark,
	.lg\:hover\:text-brick-dark:hover {
	color: #75413f;
	}

	.lg\:text-brick-darker,
	.lg\:hover\:text-brick-darker:hover {
	color: #421e1b;
	}

	.lg\:text-brick-darkest,
	.lg\:hover\:text-brick-darkest:hover {
	color: #260d0c;
	}

	.lg\:text-cream-lightest,
	.lg\:hover\:text-cream-lightest:hover {
	color: #fff;
	}

	.lg\:text-cream-lighter,
	.lg\:hover\:text-cream-lighter:hover {
	color: #f9f9fa;
	}

	.lg\:text-cream-light,
	.lg\:hover\:text-cream-light:hover {
	color: #f4f4f5;
	}

	.lg\:text-cream,
	.lg\:hover\:text-cream:hover {
	color: #f4f4f0;
	}

	.lg\:text-cream-dark,
	.lg\:hover\:text-cream-dark:hover {
	color: #d9d5c3;
	}

	.lg\:text-cream-darker,
	.lg\:hover\:text-cream-darker:hover {
	color: #bfba99;
	}

	.lg\:text-cream-darkest,
	.lg\:hover\:text-cream-darkest:hover {
	color: #a39a73;
	}

	.lg\:text-charcoal-lightest,
	.lg\:hover\:text-charcoal-lightest:hover {
	color: #969696;
	}

	.lg\:text-charcoal-lighter,
	.lg\:hover\:text-charcoal-lighter:hover {
	color: #7f7f7f;
	}

	.lg\:text-charcoal-light,
	.lg\:hover\:text-charcoal-light:hover {
	color: #686868;
	}

	.lg\:text-charcoal,
	.lg\:hover\:text-charcoal:hover {
	color: #514c4d;
	}

	.lg\:text-charcoal-dark,
	.lg\:hover\:text-charcoal-dark:hover {
	color: #332b2d;
	}

	.lg\:text-charcoal-darker,
	.lg\:hover\:text-charcoal-darker:hover {
	color: #1a1416;
	}

	.lg\:text-charcoal-darkest,
	.lg\:hover\:text-charcoal-darkest:hover {
	color: #0c090a;
	}

	.lg\:text-gold-lightest,
	.lg\:hover\:text-gold-lightest:hover {
	color: #e0e0e0;
	}

	.lg\:text-gold-lighter,
	.lg\:hover\:text-gold-lighter:hover {
	color: #c9c9c9;
	}

	.lg\:text-gold-light,
	.lg\:hover\:text-gold-light:hover {
	color: #b0ada7;
	}

	.lg\:text-gold,
	.lg\:hover\:text-gold:hover {
	color: #989488;
	}

	.lg\:text-gold-dark,
	.lg\:hover\:text-gold-dark:hover {
	color: #7c7664;
	}

	.lg\:text-gold-darker,
	.lg\:hover\:text-gold-darker:hover {
	color: #635a46;
	}

	.lg\:text-gold-darkest,
	.lg\:hover\:text-gold-darkest:hover {
	color: #473e2b;
	}

	.xl\:text-brick-lightest,
	.xl\:hover\:text-brick-lightest:hover {
	color: #dbcdcc;
	}

	.xl\:text-brick-lighter,
	.xl\:hover\:text-brick-lighter:hover {
	color: #c2a3a0;
	}

	.xl\:text-brick-light,
	.xl\:hover\:text-brick-light:hover {
	color: #aa7f7b;
	}

	.xl\:text-brick,
	.xl\:hover\:text-brick:hover {
	color: #93625b;
	}

	.xl\:text-brick-dark,
	.xl\:hover\:text-brick-dark:hover {
	color: #75413f;
	}

	.xl\:text-brick-darker,
	.xl\:hover\:text-brick-darker:hover {
	color: #421e1b;
	}

	.xl\:text-brick-darkest,
	.xl\:hover\:text-brick-darkest:hover {
	color: #260d0c;
	}

	.xl\:text-cream-lightest,
	.xl\:hover\:text-cream-lightest:hover {
	color: #fff;
	}

	.xl\:text-cream-lighter,
	.xl\:hover\:text-cream-lighter:hover {
	color: #f9f9fa;
	}

	.xl\:text-cream-light,
	.xl\:hover\:text-cream-light:hover {
	color: #f4f4f5;
	}

	.xl\:text-cream,
	.xl\:hover\:text-cream:hover {
	color: #f4f4f0;
	}

	.xl\:text-cream-dark,
	.xl\:hover\:text-cream-dark:hover {
	color: #d9d5c3;
	}

	.xl\:text-cream-darker,
	.xl\:hover\:text-cream-darker:hover {
	color: #bfba99;
	}

	.xl\:text-cream-darkest,
	.xl\:hover\:text-cream-darkest:hover {
	color: #a39a73;
	}

	.xl\:text-charcoal-lightest,
	.xl\:hover\:text-charcoal-lightest:hover {
	color: #969696;
	}

	.xl\:text-charcoal-lighter,
	.xl\:hover\:text-charcoal-lighter:hover {
	color: #7f7f7f;
	}

	.xl\:text-charcoal-light,
	.xl\:hover\:text-charcoal-light:hover {
	color: #686868;
	}

	.xl\:text-charcoal,
	.xl\:hover\:text-charcoal:hover {
	color: #514c4d;
	}

	.xl\:text-charcoal-dark,
	.xl\:hover\:text-charcoal-dark:hover {
	color: #332b2d;
	}

	.xl\:text-charcoal-darker,
	.xl\:hover\:text-charcoal-darker:hover {
	color: #1a1416;
	}

	.xl\:text-charcoal-darkest,
	.xl\:hover\:text-charcoal-darkest:hover {
	color: #0c090a;
	}

	.xl\:text-gold-lightest,
	.xl\:hover\:text-gold-lightest:hover {
	color: #e0e0e0;
	}

	.xl\:text-gold-lighter,
	.xl\:hover\:text-gold-lighter:hover {
	color: #c9c9c9;
	}

	.xl\:text-gold-light,
	.xl\:hover\:text-gold-light:hover {
	color: #b0ada7;
	}

	.xl\:text-gold,
	.xl\:hover\:text-gold:hover {
	color: #989488;
	}

	.xl\:text-gold-dark,
	.xl\:hover\:text-gold-dark:hover {
	color: #7c7664;
	}

	.xl\:text-gold-darker,
	.xl\:hover\:text-gold-darker:hover {
	color: #635a46;
	}

	.xl\:text-gold-darkest,
	.xl\:hover\:text-gold-darkest:hover {
	color: #473e2b;
	}

	.text-brick-lightest,
	.hover\:text-brick-lightest:hover {
	color: #dbcdcc;
	}

	.text-brick-lighter,
	.hover\:text-brick-lighter:hover {
	color: #c2a3a0;
	}

	.text-brick-light,
	.hover\:text-brick-light:hover {
	color: #aa7f7b;
	}

	.text-brick,
	.hover\:text-brick:hover {
	color: #93625b;
	}

	.text-brick-dark,
	.hover\:text-brick-dark:hover {
	color: #75413f;
	}

	.text-brick-darker,
	.hover\:text-brick-darker:hover {
	color: #421e1b;
	}

	.text-brick-darkest,
	.hover\:text-brick-darkest:hover {
	color: #260d0c;
	}

	.text-cream-lightest,
	.hover\:text-cream-lightest:hover {
	color: #fff;
	}

	.text-cream-lighter,
	.hover\:text-cream-lighter:hover {
	color: #f9f9fa;
	}

	.text-cream-light,
	.hover\:text-cream-light:hover {
	color: #f4f4f5;
	}

	.text-cream,
	.hover\:text-cream:hover {
	color: #f4f4f0;
	}

	.text-cream-dark,
	.hover\:text-cream-dark:hover {
	color: #d9d5c3;
	}

	.text-cream-darker,
	.hover\:text-cream-darker:hover {
	color: #bfba99;
	}

	.text-cream-darkest,
	.hover\:text-cream-darkest:hover {
	color: #a39a73;
	}

	.text-charcoal-lightest,
	.hover\:text-charcoal-lightest:hover {
	color: #969696;
	}

	.text-charcoal-lighter,
	.hover\:text-charcoal-lighter:hover {
	color: #7f7f7f;
	}

	.text-charcoal-light,
	.hover\:text-charcoal-light:hover {
	color: #686868;
	}

	.text-charcoal,
	.hover\:text-charcoal:hover {
	color: #514c4d;
	}

	.text-charcoal-dark,
	.hover\:text-charcoal-dark:hover {
	color: #332b2d;
	}

	.text-charcoal-darker,
	.hover\:text-charcoal-darker:hover {
	color: #1a1416;
	}

	.text-charcoal-darkest,
	.hover\:text-charcoal-darkest:hover {
	color: #0c090a;
	}

	.text-gold-lightest,
	.hover\:text-gold-lightest:hover {
	color: #e0e0e0;
	}

	.text-gold-lighter,
	.hover\:text-gold-lighter:hover {
	color: #c9c9c9;
	}

	.text-gold-light,
	.hover\:text-gold-light:hover {
	color: #b0ada7;
	}

	.text-gold,
	.hover\:text-gold:hover {
	color: #989488;
	}

	.text-gold-dark,
	.hover\:text-gold-dark:hover {
	color: #7c7664;
	}

	.text-gold-darker,
	.hover\:text-gold-darker:hover {
	color: #635a46;
	}

	.text-gold-darkest,
	.hover\:text-gold-darkest:hover {
	color: #473e2b;
	}