Create Your Recipe

Share your culinary masterpieces with the world! Fill out the details below to get started.

Recipe Details

*Required

Recipe Title *

Recipe Description *

<div class="hidden items-center text-red-600 text-xs" id="description-error">
              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 112 0v4a1 1 0 11-2 0V6zm0 8a1 1 0 102 0 1 1 0 00-2 0z"
                  clip-rule="evenodd"
                >
                </path>
              </svg>
              Title is required and max 128 characters.
            </div>
            <div class="hidden items-center text-green-600 text-xs" id="description-valid">
              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"
                >
                </path>
              </svg>
              Looks good!
            </div>
          </div>
          

          <div>
            <label for="category" class="block font-sm font-medium text-background-100">
              Recipe Category <span class="text-red-500 text-sm my-1">*</span>
            </label>

<div class="flex flex-wrap gap-3 mt-2 w-4/5">
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_breakfast"
                  name="category"
                  value="breakfast"
                />
                <label
                  for="category_breakfast"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Breakfast
                </label>
              </div>
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_lunch"
                  name="category"
                  value="lunch"
                />
                <label
                  for="category_lunch"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Lunch
                </label>
              </div>
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_dinner"
                  name="category"
                  value="dinner"
                />
                <label
                  for="category_dinner"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Dinner
                </label>
              </div>
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_desert"
                  name="category"
                  value="desert"
                />
                <label
                  for="category_desert"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Desert
                </label>
              </div>
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_Snack"
                  name="category"
                  value="Snack"
                />
                <label
                  for="category_Snack"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Snack
                </label>
              </div>
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_Side"
                  name="category"
                  value="Side"
                />
                <label
                  for="category_Side"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Side
                </label>
              </div>
              <div>
                <input
                  class="hidden peer"
                  type="radio"
                  id="category_other"
                  name="category"
                  value="other"
                />
                <label
                  for="category_other"
                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
                >
                  Other
                </label>
              </div>
            </div>
          </div>
          

          <div>
            <label for="title" class="block font-sm font-medium text-background-100">
              Serves <span class="text-red-500 text-sm my-1">*</span>
            </label>

<input
              type="number"
              id="serving"
              name="serving"
              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
              value="4"
              min="1"
              max="16"
              required
            />
          </div>
          

          <div>
            <label for="title" class="block font-sm font-medium text-background-100">
              Difficulty <span class="text-red-500 text-sm my-1">*</span>
            </label>

<div class="star-rating flex flex-row-reverse justify-end unicode-bidi-override">
              <input type="radio" id="star5" name="difficulty" value="5" class="hidden" />
              <label
                for="star5"
                title="5 stars"
                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
              >
                ★
              </label>
              <input type="radio" id="star4" name="difficulty" value="4" class="hidden" />
              <label
                for="star4"
                title="4 stars"
                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
              >
                ★
              </label>
              <input type="radio" id="star3" name="difficulty" value="3" class="hidden" />
              <label
                for="star3"
                title="3 stars"
                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
              >
                ★
              </label>
              <input type="radio" id="star2" name="difficulty" value="2" class="hidden" />
              <label
                for="star2"
                title="2 stars"
                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
              >
                ★
              </label>
              <input type="radio" id="star1" name="difficulty" value="1" required class="hidden" />
              <label
                for="star1"
                title="1 star"
                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
              >
                ★
              </label>
            </div>
          </div>
          

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label for="title" class="block font-sm font-medium text-background-100">
                Prep Time (minutes) <span class="text-red-500 text-sm my-1">*</span>
              </label>

<input
                type="number"
                id="prep-time"
                name="prep-time"
                class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
                value="15"
                min="0"
                max="120"
                required
              />
            </div>
            <div>
              <label for="title" class="block font-sm font-medium text-background-100">
                Cook Time (minutes) <span class="text-red-500 text-sm my-1">*</span>
              </label>

<hr class="text-background-200" />
      

      <section class="w-full my-8">
        <div class="flex flex-col mb-4">
          <h2 class="text-2xl font-semibold text-white flex items-center">
            Ingredients <span class="text-red-500 text-sm m-1">*</span>
          </h2>
        </div>
        

        <ul class="">
          <li class="flex gap-2">
            <input
              type="text"
              id="ingredient-1"
              name="ingredient-1"
              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm flex-grow
            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
              placeholder="e.g., All-purpose flour"
              required
            />
            <input
              type="text"
              id="quantity-1"
              name="quantity-1"
              class="my-1 w-2/5 px-4 py-2 border border-background-200 rounded-md shadow-sm
            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
              placeholder="2 cups"
              required
            />

<div class="flex items-center justify-start my-4">
          <button class="bg-primary-400 text-white px-6 py-2 rounded-md font-medium
            focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
            Add Ingredient
          </button>
        </div>
      </section>

<hr class="text-background-200" />
      

      <section class="w-full my-8">
        <div class="flex flex-col mb-4">
          <h2 class="text-2xl font-semibold text-white flex items-center">
            Instructions <span class="text-red-500 text-sm m-1">*</span>
          </h2>
        </div>
        

        <ul class="flex flex-col gap-2">
          <li class="flex flex-col gap-2">
            <div class="flex items-center justify-between">
              <label class="text-white text-xl font-semibold">
                Step 1
              </label>
              <button class="my-1 p-2 border border-background-200 rounded-md shadow-sm">
                <svg
                  class="h-5 text-red-500"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M4 7H20"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M6 10L7.70141 19.3578C7.87432 20.3088 8.70258 21 9.66915 21H14.3308C15.2974 21 16.1257 20.3087 16.2986 19.3578L18 10"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </button>
            </div>

<div class="flex items-center justify-start my-4">
          <button class="bg-primary-400 text-white px-6 py-2 rounded-md font-medium
            focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
            Add Instruction
          </button>
        </div>
      </section>

<hr class="text-background-200" />
      

      <section class="w-full my-8">
        <div class="flex flex-col mb-4">
          <h2 class="text-2xl font-semibold text-white flex items-center">
            Media & Tags <span class="text-background-100 text-sm mx-2">(optional)</span>
          </h2>
        </div>
        

        <div>
          <label for="image" class="block font-sm font-medium text-background-100">
            Recipe Image
          </label>
          <div class="mt-1 flex justify-center p-6 border-2 border-background-200 border-dashed rounded-md">
            <div class="space-y-1 text-center">
              <svg
                class="size-16 mx-auto text-background-200"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14.2639 15.9375L12.5958 14.2834C11.7909 13.4851 11.3884 13.086 10.9266 12.9401C10.5204 12.8118 10.0838 12.8165 9.68048 12.9536C9.22188 13.1095 8.82814 13.5172 8.04068 14.3326L4.04409 18.2801M14.2639 15.9375L14.6053 15.599C15.4112 14.7998 15.8141 14.4002 16.2765 14.2543C16.6831 14.126 17.12 14.1311 17.5236 14.2687C17.9824 14.4251 18.3761 14.8339 19.1634 15.6514L20 16.4934M14.2639 15.9375L18.275 19.9565M18.275 19.9565C17.9176 20 17.4543 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.71569 19.5903 4.40973 19.2843 4.21799 18.908C4.12796 18.7313 4.07512 18.5321 4.04409 18.2801M18.275 19.9565C18.5293 19.9256 18.7301 19.8727 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V16.4934M4.04409 18.2801C4 17.9221 4 17.4575 4 16.8V7.2C4 6.0799 4 5.51984 4.21799 5.09202C4.40973 4.71569 4.71569 4.40973 5.09202 4.21799C5.51984 4 6.07989 4 7.2 4H16.8C17.9201 4 18.4802 4 18.908 4.21799C19.2843 4.40973 19.5903 4.71569 19.782 5.09202C20 5.51984 20 6.0799 20 7.2V16.4934M17 8.99989C17 10.1045 16.1046 10.9999 15 10.9999C13.8954 10.9999 13 10.1045 13 8.99989C13 7.89532 13.8954 6.99989 15 6.99989C16.1046 6.99989 17 7.89532 17 8.99989Z"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <div class="flex text-sm text-background-100">
                <label
                  for="file-upload"
                  class="relative cursor-pointer font-medium text-primary-200 underline"
                >
                  <span>Upload a file</span>
                  <input id="file-upload" name="file-upload" type="file" class="sr-only" />
                </label>
                <p class="pl-1">or drag and drop</p>
              </div>
              <p class="text-xs text-background-200">PNG, JPG, GIF up to 10MB</p>
            </div>
          </div>
        </div>
        

        <div class="my-4">
          <label for="tags" class="block font-sm font-medium text-background-100">
            Tags
          </label>
          <input
            type="text"
            id="tags"
            name="tags"
            placeholder="Add tags (e.g., quick, pasta, high protien)"
            class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
            maxlength="32"
          />

<ul class="flex flex-wrap gap-2 my-2">
            <li class="">
              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
                Quick
              </button>
            </li>
            <li class="">
              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
                High-Protein
              </button>
            </li>
            <li class="">
              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
                Healthy
              </button>
            </li>
            <li class="">
              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
                Nutrient-Rich
              </button>
            </li>
          </ul>
        </div>
      </section>
      

      <section class="w-full mt-16 mb-8 flex justify-end">
        <button
          type="submit"
          class="px-6 py-3 bg-gradient-to-tr from-primary-500 to-primary-400 text-white 
        rounded-md font-semibold"
        >
          Save Recipe
        </button>
      </section>
    </main>
  </div>
</div>