Code Blocks

Daily UI Prompt 1

Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image.
Register

Let's lock in your spot for this event!
"use client";
import React from "react";
import { toast } from "sonner";

export default function SignUpModal() {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    toast(`Sign up successful for ${firstName} ${lastName}`);
  }
  return (
    <>
      <div className="shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] px-10 py-6 w-fit rounded-[50px] border-4 border-white flex flex-col gap-16 text-[#2E4052]">
        <div className="flex flex-col gap-4 ">
          <h2 className="text-[32px] font-bold">Register</h2>
          <p>Let&apos;s lock in your spot for this event!</p>
        </div>
        <form className="flex flex-col gap-8" onSubmit={handleSubmit}>
          <div className="flex flex-row items-center gap-10">
            <div className="flex flex-col gap-2 font-semibold">
              <label className=" text-[16px]">First name</label>
              <input
                type="text"
                placeholder="John"
                onChange={(e) => setFirstName(e.target.value)}
                className="bg-[#BDD9BF] border-black border-2 rounded-[50px] shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] px-4 py-2 "
              />
            </div>
            <div className="flex flex-col gap-2 font-semibold">
              <label className=" text-[16px]">Last name</label>
              <input
                type="text"
                onChange={(e) => setLastName(e.target.value)}
                placeholder="Smith"
                className="bg-[#BDD9BF] border-black border-2 rounded-[50px] shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] px-4 py-2 "
              />
            </div>
          </div>
          <div className="flex flex-col gap-6 font-semibold">
            <div className="flex flex-col gap-2">
              <label className=" text-[16px]">Email</label>
              <input
                type="text"
                placeholder="john.smith@example.com"
                className="bg-[#BDD9BF] border-black border-2 rounded-[50px] shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] px-4 py-2 "
              />
            </div>
            <div className="flex flex-col gap-2">
              <label className=" text-[16px]">Password</label>
              <input
                type="password"
                placeholder="Smith"
                className="bg-[#BDD9BF] border-black border-2 rounded-[50px] shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] px-4 py-2 "
              />
            </div>
          </div>
          <div className="flex justify-center mb-10">
            <div className="relative w-fit hover:cursor-pointer transition-all duration-300 ease-out hover:translate-y-[-4px]">
              <div className="absolute inset-0 translate-x-2 translate-y-2 bg-[#ffc857] border border-black rounded-[50px]" />
              <button
                className="relative bg-[#412234] border border-black text-white rounded-[50px] px-6 py-2 font-bold text-[16px] hover:cursor-pointer"
                type="submit"
              >
                JOIN EVENT
              </button>
            </div>
          </div>
        </form>
      </div>
    </>
  );
}