Create a new site

by michananya

HTML

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<title>Stitch Design</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style type="text/tailwindcss">
      :root {
        --primary-color: #ea2a33;
      }
      body {
        font-family: 'Spline Sans', 'Noto Sans', sans-serif;
      }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-gray-900 text-white">
<div class="relative flex size-full min-h-screen flex-col justify-between overflow-x-hidden">
<div class="flex-grow">
<header class="sticky top-0 z-10 flex items-center justify-between bg-gray-900/80 p-4 backdrop-blur-sm">
<button class="flex size-10 items-center justify-center rounded-full hover:bg-gray-800">
<span class="material-symbols-outlined text-2xl">arrow_back_ios_new</span>
</button>
<h1 class="text-xl font-bold">Add Site</h1>
<div class="w-10"></div>
</header>
<main class="p-4 space-y-6">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-400 mb-2" for="address">Address</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">location_on</span>
<input class="form-input flex w-full resize-none overflow-hidden rounded-lg border border-gray-700 bg-gray-800 py-3 pl-10 pr-4 text-base placeholder:text-gray-500 focus:border-[var(--primary-color)] focus:ring-[var(--primary-color)]" id="address"...