Profile page

by Imri Paloja

HTML

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-eb-dark p-4">
  <form>
    <div class="space-y-12">
      <div class="border-b border-white/10 pb-12">
        <h1 class="font-semibold text-white text-center">Profile</h1>
        <p class="mt-1 text-sm/6 text-gray-400 text-center">
          This information will be displayed publicly so be careful what you
          share.
        </p>

        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
          <div class="sm:col-span-2">
            <label for="username" class="block text-sm/6 font-medium text-white"
              >Username</label
            >
            <div class="mt-2">
              <div
                class="flex items-center rounded-md bg-white/5 pl-3 outline-1 -outline-offset-1 outline-white/10 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-eb-red"
              >
                <input
                  id="username"
                  type="text"
                  name="username"
                  placeholder="jd"
                  class="block min-w-0 grow bg-transparent py-1.5 pr-3 pl-1 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-sm/6"
                />
              </div>
            </div>
          </div>
          <div class="sm:col-span-2">
            <label
              for="first-name"
              class="block text-sm/6 font-medium text-white"
              >First name</label
            >
            <div class="mt-2">
              <input
                id="first-name"
                type="text"
                name="first-name"
                placeholder="John"
                autocomplete="given-name"
                class="block w-full rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-none focus:-outline-offset-2 focus:outline-eb-red...

Tailwind CSS

textarea {
  min-width: 250px;
  width: 450px;
  max-width: 100%;

  min-height: 250px;
  height: 100%;
  max-height: 450px;
}

JavaScript

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'eb-red': '#e60000',
        'eb-dark': '#1b1e1f',
        'eb-gray': '#181a1b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}