feat: add Header component

Author: jason89521

dev/App.tsx

@@ -1,20 +1,22 @@
 import React, { useState } from 'react';
 import './App.css';
 import Typist from '../src';
+import Header from './components/Header';
 
 function App() {
   const [count, setCount] = useState(0);
   const [key, setKey] = useState(1);
 
   return (
-    <div className="App text-blue-400">
+    <div className='bg-slate-600 px-12 py-10 text-white '>
+      <Header />
       <button onClick={() => setKey(key + 1)}>key</button>
       <button onClick={() => setCount(count + 1)}>{count}</button>
       <br />
       <Typist
         typingDelay={100}
         disabled={count % 2 === 0}
-        cursor={<span className="cursor">|</span>}
+        cursor={<span className='cursor'>|</span>}
         restartKey={key}
       >
         This is a typo

dev/components/Header.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Typist from '../../src';
+
+export default function Header() {
+  return (
+    <div>
+      <header className='text-xl text-cyan-400'>
+        <h1 className='mb-4 text-4xl font-bold'>React Typist Component</h1>
+        <Typist typingDelay={randomDelayGenerator}>
+          Use this component to create{' '}
+          <span className='text-red-500'>typewriter effect</span> easily!
+        </Typist>
+      </header>
+    </div>
+  );
+}