fixed: #23

src/components/Header/index.tsx

@@ -9,7 +9,9 @@ const Header: React.FC = ({ children }) => {
           <FontAwesomeIcon icon={['far', 'keyboard']} className="h-10 fill-current text-indigo-700 pr-2" />
           Qwerty Learner
         </a>
-        <div className="flex w-1/2 justify-end content-center items-center space-x-3">{children}</div>
+        <div className="flex bg-white justify-end content-center items-center space-x-3 card rounded-large w-auto on inline-block element p-4">
+          {children}
+        </div>
       </div>
     </nav>
   )

src/components/Main/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Container: React.FC = ({ children }) => {
-  return <div className="container  mx-auto pb-20 flex flex-col flex-1 items-center justify-center">{children}</div>
+  return <div className="container h-full mx-auto pb-20 flex flex-col flex-1 items-center justify-center">{children}</div>
 }
 
 export default Container

src/components/Speed/index.tsx

@@ -15,7 +15,7 @@ const Speed: React.FC<SpeedProps> = ({ correctCount, inputCount, isStart }) => {
   }, [isStart, start, pause])
 
   return (
-    <div className="w-3/5 flex  items-center justify-between">
+    <div className="w-3/5 flex bg-white mt-auto rounded-large card p-4 py-10 opacity-45">
       <InfoBox info={`${minutesStirng}:${secondsStirng}`} description="时间" />
       <InfoBox info={inputCount + ''} description="输入数" />
       <InfoBox info={speed + ''} description="速度" />

src/index.css

@@ -8,6 +8,7 @@ body {
     'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #faf9ff;
 }
 
 code {
@@ -19,3 +20,9 @@ body,
 :global(#root) {
   height: 100%;
 }
+
+.card {
+  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
+    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
+    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
+}

src/pages/App.tsx

@@ -348,7 +348,9 @@ const App: React.FC = () => {
         </Header>
 
         <Main>
-          <div className="container flex mx-auto flex-col items-center justify-center">
+          <div className="container h-full relative flex mx-auto flex-col items-center">
+            <div className="h-1/3"></div>
+            <div>
               <Word
                 key={`word-${wordList[order].name}`}
                 word={wordList[order].name}
@@ -361,6 +363,8 @@ const App: React.FC = () => {
                 <Phonetic usphone={wordList[order].usphone} ukphone={wordList[order].ukphone} />
               )}
               <Translation key={`trans-${wordList[order].name}`} trans={wordList[order].trans.join('；')} />
+            </div>
+
             <Speed correctCount={correctCount} inputCount={inputCount} isStart={isStart} />
           </div>
         </Main>

tailwind.config.js

@@ -3,6 +3,10 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
+    borderRadius: {
+      'large': '0.75rem',
+      'lg':'0.5rem',
+    },
   },
   variants: {
     extend: {