update

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@redux-devtools/core": "^3.11.0",
+    "@tailwindcss/forms": "^0.5.0",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@vitejs/plugin-react": "^1.2.0",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.3
 specifiers:
   '@redux-devtools/core': ^3.11.0
   '@reduxjs/toolkit': ^1.8.0
+  '@tailwindcss/forms': ^0.5.0
   '@types/react': ^17.0.40
   '@types/react-dom': ^17.0.13
   '@vitejs/plugin-react': ^1.2.0
@@ -39,6 +40,7 @@ dependencies:
 
 devDependencies:
   '@redux-devtools/core': 3.11.0_34362ad81a919891909cf289bf01b934
+  '@tailwindcss/forms': 0.5.0_tailwindcss@3.0.23
   '@types/react': 17.0.40
   '@types/react-dom': 17.0.13
   '@vitejs/plugin-react': 1.2.0
@@ -410,6 +412,15 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@tailwindcss/forms/0.5.0_tailwindcss@3.0.23:
+    resolution: {integrity: sha512-KzWugryEBFkmoaYcBE18rs6gthWCFHHO7cAZm2/hv3hwD67AzwP7udSCa22E7R1+CEJL/FfhYsJWrc0b1aeSzw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.0.23_autoprefixer@10.4.2
+    dev: true
+
   /@types/hoist-non-react-statics/3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
@@ -1180,6 +1191,11 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /mini-svg-data-uri/1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
   /minimist/1.2.5:
     resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
 

prettier.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  plugins: [require("prettier-plugin-tailwindcss")],
+  printWidth: 80,
+  plugins: [
+    require("prettier-plugin-tailwindcss"),
+  ],
 };

src/pages/home/index.tsx

@@ -1,24 +1,46 @@
 export default function Home() {
   return (
-    <div>
-      <div
-        className={
-          "m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 text-center"
-        }
-      >
-        LOGO
-      </div>
+    <div className={"grid grid-cols-2 grid-rows-2"}>
+      <Logo />
 
-      <Menu></Menu>
+      <Menu />
+    </div>
+  );
+}
+
+function Logo() {
+  return (
+    <div
+      className={
+        "m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 bg-white text-center shadow-lg"
+      }
+    >
+      LOGO
     </div>
   );
 }
 
 function Menu() {
   return (
-    <div className={"container absolute top-2 right-2 flex gap-2"}>
-      <div>定价</div>
-      <div>注册/登录</div>
+    <div
+      className={
+        "top-2 right-2 flex origin-center items-center justify-end gap-2 pr-5 align-middle underline underline-offset-2"
+      }
+    >
+      <div className={"cursor-pointer bg-green-300"}>定价</div>
+      <div className={"cursor-pointer bg-green-300"}>注册/登录</div>
+      <input type="date" className="mt-1 block w-full" />
+      <select className="form-select px-4 py-3">
+        <optgroup label={"xxx"}>
+          <title>xxx</title>
+          <option>中文</option>
+          <option>英文</option>
+        </optgroup>
+        <optgroup label={"www"}>
+          <option>中文</option>
+          <option>英文</option>
+        </optgroup>
+      </select>
     </div>
   );
 }