Finished Typography

Co-authored-by: KillerBossOriginal <killerbossoriginal@outlook.it>

typography.tsx

@@ -12,4 +12,106 @@ export class H1 extends React.Component<Props> {
             </h1>
         );
     }
+}
+
+export class H2 extends React.Component<Props> {
+    render() {
+        return (
+            <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+                {this.props.children}
+            </h2>
+        );
+    }
+}
+
+export class H3 extends React.Component<Props> {
+    render() {
+        return (
+            <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+                {this.props.children}
+            </h3>
+        );
+    }
+}
+
+export class H4 extends React.Component<Props> {
+    render() {
+        return (
+            <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+                {this.props.children}
+            </h4>
+        );
+    }
+}
+
+export class P extends React.Component<Props> {
+    render() {
+        return (
+            <p className="leading-7 [&:not(:first-child)]:mt-6">
+                {this.props.children}
+            </p>
+        );
+    }
+}
+
+export class Blockquote extends React.Component<Props> {
+    render() {
+        return (
+            <blockquote className="mt-6 border-l-2 pl-6 italic">
+                {this.props.children}
+            </blockquote>
+        );
+    }
+}
+
+export class Table extends React.Component<Props> {
+    render() {
+        return (
+            <div className="my-6 w-full overflow-y-auto">
+                <table className="w-full">
+                    {this.props.children}
+                </table>
+            </div>
+        );
+    }
+}
+
+export class TableHead extends React.Component<Props> {
+    render() {
+        return (
+            <thead>
+                {this.props.children}
+            </thead>
+        );
+    }
+}
+
+export class Tr extends React.Component<Props> {
+    render() {
+        return (
+            <tr className="m-0 border-t p-0 even:bg-muted">
+                {this.props.children}
+            </tr>
+        );
+    }
+}
+
+export class Th extends React.Component<Props> {
+    render() {
+        return (
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                {this.props.children}
+            </th>
+        );
+    }
+}
+
+export class Td extends React.Component<Props> {
+    render() {
+        return (
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                {this.props.children}
+            </td>
+        );
+    }
 }