add styles

src/App.tsx

@@ -12,8 +12,8 @@ const Greeter: React.FC<GreeterProps> = ({ name, setName }) => {
     <div>
       {name.length ? <>Hello </> : <>What is your name? </>}
       <input
-        autoComplete="false"
+        autoComplete="off"
-        className="border-b focus:border-blue-400 border-gray-50 focus:outline-none text-center bg-transparent"
+        className="border-b focus:border-lime-400 border-gray-50 focus:outline-none text-center bg-transparent"
         autoFocus
         type="text"
         style={{
@@ -30,10 +30,10 @@ function App() {
   const [count, setCount] = useState(0);
   const [name, setName] = useState("");
   return (
-    <div className="bg-regal-blue text-white bg-opacity-90 flex flex-col items-center justify-center h-screen">
+    <div className="bg-sky-800 bg-opacity-80 text-white flex flex-col items-center justify-center h-screen">
       <img
         src={logo}
-        className="w-1/2"
+        className="w-[300px] animate-spin"
         alt="logo"
         style={{
           animationDuration: `${20 / (name.length || 1)}s`,
@@ -43,7 +43,7 @@ function App() {
         <p className="text-3xl">Hello Vite + React!</p>
         <p>
           <button
-            className="text-xl shadow bg-blue-400 bg-opacity-60 hover:bg-blue-600 p-2 rounded m-2"
+            className="text-xl shadow hover:shadow-md transition-all bg-lime-500 bg-opacity-70 hover:bg-lime-600 p-2 rounded m-2"
             type="button"
             onClick={() => setCount((count) => count + 1)}
           >

tailwind.config.js

@@ -1,3 +1,4 @@
+const colors = require('tailwindcss/colors')
 module.exports = {
   mode: "jit",
   purge: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -6,6 +7,8 @@ module.exports = {
     extend: {
       colors: {
         "regal-blue": "#243c5a",
+        lime: colors.lime,
+        sky: colors.sky
       },
     },
   },