Custom Styles with Presets

FOR STYLING:
  
Avoid using the basic names for colors.
Instead, use these custom tailwind colors (weights 200, 300, 400) in the className when relevant.
  * cyan
  * yellow
  * lime
  * pink
  * orange
  * red
  
  cyan-300 is the PRIMARY color. Use it for primary buttons or headers along with black text.
  yellow-300 is the SECONDARY COLOR. Use it for secondary buttons.
  
  EXAMPLE:
  bg-cyan-300 hover:bg-cyan-400 
  
  use black for text, do not use yellow or white for text! Black for text always!
  
  Borders and shadows should be black and thick. 
  
  EXAMPLE: 
  border-black border-2 rounded-md hover:shadow-[8px_8px_0px_rgba(0,0,0,1)] bg-white
  
  
  STYLING EXAMPLES:
  
  --- BUTTON EXAMPLE 1: ---
  style buttons as such:
  \`\`\`tsx
  <div className="flex justify-evenly space-x-6">
  <button className="h-12 border-black border-2 p-2.5 bg-cyan-200 hover:bg-cyan-300 hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:bg-cyan-400">
    Simple Button
  </button>
  <button className="h-12 border-black border-2 p-2.5 bg-cyan-200 hover:bg-cyan-300 hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:bg-cyan-400 rounded-md">
    Medium Rounded Button
  </button>
  <button className="h-12 border-black border-2 p-2.5 bg-cyan-200 hover:bg-cyan-300 hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:bg-cyan-400 rounded-full">
    Full Rounded Button
  </button>
  </div>
  \`\`\`
  --- CARD EXAMPLE 2: ---
  style cards as such:
  \`\`\`tsx
  <div className="w-80 h-full border-black border-2 rounded-md hover:shadow-[8px_8px_0px_rgba(0,0,0,1)] bg-white">
    <figure className="w-full h-1/2 border-black border-b-2">
      <img
        src="/placeholder.png"
        alt="thumbnail"
        className="w-full h-full object-cover"
      />
    </figure>
    <div className="px-6 py-5 text-left h-full">
      <p className="text-base mb-4">May 15th, 2023</p>
      <h1 className="text-[32px] mb-4">Neo Brutallism</h1>
      <p className="text-xs mb-4 line-clamp-4">Neobrutalism UI</p>
      <strong>Read More</strong>
    </div>
  </div>
  \`\`\`
  -- CARD EXAMPLE 3: ---
  style inputs as such:
  \`\`\`tsx
  <div className="flex flex-col space-y-6">
    <input
      className="w-96 border-black border-2 p-2.5 focus:outline-none focus:shadow-[2px_2px_0px_rgba(0,0,0,1)] focus:bg-pink-200 active:shadow-[2px_2px_0px_rgba(0,0,0,1)]"
      placeholder="you@example.com"
    />
    <input
      className="w-96 border-black border-2 p-2.5 focus:outline-none focus:shadow-[2px_2px_0px_rgba(0,0,0,1)] focus:bg-pink-200 active:shadow-[2px_2px_0px_rgba(0,0,0,1)] rounded-md"
      placeholder="you@example.com"
    />
    <input
      className="w-96 border-black border-2 p-2.5 focus:outline-none focus:shadow-[2px_2px_0px_rgba(0,0,0,1)] focus:bg-pink-200 active:shadow-[2px_2px_0px_rgba(0,0,0,1)] rounded-full"
      placeholder="you@example.com"
    />
  </div>
  \`\`\`
  -- CHECKBOX EXAMPLE 4: ---
  style checkboxes as such:
  import classNames from "classnames";
  const Checkbox = () => {
    const [checked, setChecked] = useState(false);
    return (
      <>
        <label>
          <input
            type="checkbox"
            className={classNames(
              "appearance-none outline-none block relative text-center cursor-pointer m-auto w-5 h-5 before:rounded-sm before:block before:absolute before:content-[''] before:bg-[#FFC29F] before:w-5 before:h-5 before:rounded-sm before:border-black before:border-2 before:hover:shadow-[2px_2px_0px_rgba(0,0,0,1)]  after:block after:content-[''] after:absolute after:left-1.5 after:top-0.5 after:w-2 after:h-3 after:border-black after:border-r-2 after:border-b-2 after:origin-center after:rotate-45",
              { "after:opacity-1 before:checked:bg-[#FF965B]": checked },
              { "after:opacity-0": checked === false },
            )}
            checked={checked}
            onClick={() => setChecked(!checked)}
          />
        </label>
      </>
    );
  };