diff --git a/package.json b/package.json
index f2272e1..dbc2c7c 100644
--- a/package.json
+++ b/package.json
@@ -189,7 +189,6 @@
     "react-dom": "17.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.3.4",
     "@types/git-url-parse": "^9.0.1",
     "@types/lodash": "^4.14.176",
     "@types/parse-github-url": "^1.0.0",
@@ -198,12 +197,9 @@
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/three": "^0.134.0",
     "@vitejs/plugin-react": "^1.0.0",
-    "autoprefixer": "^10.4.0",
     "concurrently": "^6.4.0",
     "esbuild": "^0.13.14",
     "npm-watch": "^0.11.0",
-    "postcss": "^8.3.11",
-    "tailwindcss": "^2.2.19",
     "typescript": "^4.3.2",
     "vite": "^2.6.4"
   }
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 33ad091..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/src/App.tsx b/src/App.tsx
index 8d7bae1..a26276a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,14 +4,16 @@ import { AppInner } from "./components/app-inner";
 import { useLocalStorage, usePackageJson } from "./hooks";
 
 function App() {
-  const [blockId, setBlockId] = useState(
+  const [blockId, setBlockId] = useLocalStorage(
+    "blockId",
     "/src/blocks/file-blocks/code/index.tsx"
   );
-  const [fileUrl, setFileUrl] = useState(
+  const [fileUrl, setFileUrl] = useLocalStorage(
+    "fileUrl",
     "https://github.com/githubocto/flat/blob/main/src/git.ts"
   );
   const [doMimicProductionEnvironment, setDoMimicProductionEnvironment] =
-    useState(false);
+    useLocalStorage("doMimicProductionEnvironment", false);
 
   const { data: pkgJson, status } = usePackageJson();
 
@@ -53,15 +55,39 @@ function App() {
   const block = pkgJson?.blocks.find((v) => v.entry === blockId);
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden">
-      <div className="bg-gray-100 border-b p-4 flex-shrink-0 flex items-center">
-        <div className="w-[400px]">
-          <label className="text-xs font-medium block mb-1" htmlFor="url">
+    <div style={{
+      height: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      fontFamily: "sans-serif",
+    }}>
+      <div style={{
+        boxShadow: "0 0 1em rgba(0, 0, 0, 0.1)",
+        flex: "none",
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        padding: "0.5em",
+        zIndex: 10,
+      }}>
+        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
+          <label style={{
+            fontSize: "0.9em",
+            fontWeight: 500,
+            display: "block",
+            marginBottom: "0.5em",
+          }} htmlFor="url">
             GitHub File URL
           </label>
           <input
             id="url"
-            className="form-input w-full text-sm"
+            style={{
+              width: "calc(100% - 1.2em)",
+              fontSize: "1em",
+              padding: "0.5em",
+              border: "1px solid #ccc",
+            }}
             placeholder="Enter GitHub file URL"
             value={fileUrl}
             onChange={(e) => {
@@ -69,8 +95,13 @@ function App() {
             }}
           />
         </div>
-        <div className="ml-4">
-          <label className="text-xs font-medium block mb-1" htmlFor="block">
+        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
+          <label style={{
+            fontSize: "0.9em",
+            fontWeight: 500,
+            display: "block",
+            marginBottom: "0.5em",
+          }} htmlFor="block">
             Block
           </label>
           <select
@@ -79,7 +110,12 @@ function App() {
             }}
             value={blockId}
             disabled={!pkgJson || status !== "success"}
-            className="form-select text-sm"
+            style={{
+              width: "100%",
+              fontSize: "1em",
+              padding: "0.5em",
+              border: "1px solid #ccc",
+            }}
             name="block"
             id="block"
           >
@@ -112,8 +148,13 @@ function App() {
             </optgroup>
           </select>
         </div>
-        <div className="ml-4">
-          <label className="text-xs font-medium block mb-1" htmlFor="block">
+        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
+          <label style={{
+            fontSize: "0.9em",
+            fontWeight: 500,
+            display: "block",
+            marginBottom: "0.5em",
+          }} htmlFor="block">
             Environment
           </label>
           <select
@@ -121,7 +162,12 @@ function App() {
               setDoMimicProductionEnvironment(e.target.value === "true");
             }}
             value={doMimicProductionEnvironment ? "true" : "false"}
-            className="form-select text-sm"
+            style={{
+              width: "100%",
+              fontSize: "1em",
+              padding: "0.5em",
+              border: "1px solid #ccc",
+            }}
             name="block"
             id="block"
           >
@@ -134,10 +180,15 @@ function App() {
           </select>
         </div>
       </div>
-      <div className="flex-1 overflow-auto">
+      <div style={{
+        flex: 1,
+        overflow: "auto",
+      }}>
         {(!blockId || !fileUrl) && (
-          <div className="p-4">
-            <p className="text-sm">
+          <div style={{
+            padding: "1em",
+          }}>
+            <p>
               Please select a block and enter a file path.
             </p>
           </div>
diff --git a/src/blocks/file-blocks/code/index.tsx b/src/blocks/file-blocks/code/index.tsx
index 02fdc62..458b97a 100644
--- a/src/blocks/file-blocks/code/index.tsx
+++ b/src/blocks/file-blocks/code/index.tsx
@@ -1,8 +1,8 @@
 import "./style.css"
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { FileBlockProps } from "@githubnext/utils";
+// import { FileBlockProps } from "@githubnext/utils";
 
-export default function (props: FileBlockProps) {
+export default function (props: any) {
   const { content } = props;
 
   return (
diff --git a/src/components/app-inner.tsx b/src/components/app-inner.tsx
index 4796463..fc5aeca 100644
--- a/src/components/app-inner.tsx
+++ b/src/components/app-inner.tsx
@@ -30,26 +30,64 @@ function ErrorFallback({
   resetErrorBoundary: () => void;
 }) {
   return (
-    <div className="p-4" role="alert">
-      <div className="bg-red-100 border border-red-600 text-sm p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex-1">
-            <p className="text-red-600">Something went wrong!</p>
-            <div className="my-2 overflow-hidden">
-              <p className="overflow-auto text-xs text-red-600 font-mono leading-5">
-                {error.message}
-              </p>
-            </div>
-          </div>
-          <div className="flex-shrink-0">
-            <button
-              className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-              onClick={resetErrorBoundary}
-            >
-              Try again
-            </button>
+    <div style={{
+      padding: '10vh 1rem',
+      textAlign: 'center',
+      backgroundColor: '#FEF2F2',
+      color: '#DB2725',
+      height: '100%',
+      fontSize: '1.2em',
+    }} role="alert">
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+        <div style={{
+          flex: 1
+        }}>
+          <p>Something went wrong!</p>
+          <div style={{
+            margin: '1rem 0',
+            background: '#fff',
+            maxHeight: '20rem',
+            overflow: 'auto',
+            maxWidth: '90vw',
+          }}>
+            <p style={{
+              fontFamily: 'monospace',
+              fontSize: '1em',
+              lineHeight: '1.5em',
+            }}>
+              {error.message}
+            </p>
           </div>
         </div>
+        <div style={{
+          flex: "none"
+        }}>
+          <button
+            style={{
+              appearance: 'none',
+              backgroundColor: '#DB2725',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '0.9rem 1.6rem',
+              fontSize: '0.8em',
+              lineHeight: '1em',
+              borderRadius: '2em',
+              fontWeight: 500,
+              border: `none`,
+              color: '#fff',
+              cursor: 'pointer',
+            }}
+            onClick={resetErrorBoundary}
+          >
+            Try again
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/error-state.tsx b/src/components/error-state.tsx
index 6f0ca55..e47e5f6 100644
--- a/src/components/error-state.tsx
+++ b/src/components/error-state.tsx
@@ -1,5 +1,12 @@
 export const ErrorState = () => (
-  <div className="p-6 text-center bg-red-50 text-red-600 py-20 h-full italic">
+  <div style={{
+    padding: '10vh 1rem',
+    textAlign: 'center',
+    backgroundColor: '#FEF2F2',
+    color: '#DB2725',
+    height: '100%',
+    fontStyle: 'italic',
+  }}>
     Something went wrong
   </div>
 );
diff --git a/src/components/file-block.tsx b/src/components/file-block.tsx
index 57f8c8b..0ec2127 100644
--- a/src/components/file-block.tsx
+++ b/src/components/file-block.tsx
@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { useFileContent } from "../hooks";
 import { AppInnerProps } from "./app-inner";
 import { ErrorState } from "./error-state";
@@ -20,7 +19,14 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
     !urlParts.ref ||
     !urlParts.filepath
   ) {
-    <div className="p-6 text-center bg-red-50 text-red-600 py-20 h-full italic">
+    <div style={{
+      padding: '10vh 1rem',
+      textAlign: 'center',
+      backgroundColor: '#FEF2F2',
+      color: '#DB2725',
+      height: '100%',
+      fontStyle: 'italic',
+    }}>
       Unable to parse this GitHub URL. Are you sure you've linked to a folder
       and not a file?
     </div>;
@@ -39,7 +45,10 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
   if (status === "error") return <ErrorState />;
   if (status === "success" && data) {
     return doMimicProductionEnvironment ? (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <ProductionBlock
           contents={data.content}
           context={{
@@ -51,7 +60,10 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
         />
       </div>
     ) : (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <LocalBlock
           contents={data.content}
           context={{
diff --git a/src/components/folder-block.tsx b/src/components/folder-block.tsx
index 8c08b4f..52ac31b 100644
--- a/src/components/folder-block.tsx
+++ b/src/components/folder-block.tsx
@@ -17,7 +17,14 @@ export function FolderBlock(
     !urlParts.name
   ) {
     return (
-      <div className="p-6 text-center bg-red-50 text-red-600 py-20 h-full italic">
+      <div style={{
+        padding: '10vh 1rem',
+        textAlign: 'center',
+        backgroundColor: '#FEF2F2',
+        color: '#DB2725',
+        height: '100%',
+        fontStyle: 'italic',
+      }}>
         Unable to parse this GitHub URL. Are you sure you've linked to a folder and not a file?
       </div>
     );
@@ -42,7 +49,10 @@ export function FolderBlock(
   if (status === "error") return <ErrorState />;
   if (status === "success" && data) {
     return doMimicProductionEnvironment ? (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <ProductionBlock
           tree={data.tree}
           context={{
@@ -54,7 +64,10 @@ export function FolderBlock(
         />
       </div>
     ) : (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <LocalBlock
           tree={data.tree}
           context={{
diff --git a/src/components/loading-state.tsx b/src/components/loading-state.tsx
index 06523b2..1de8929 100644
--- a/src/components/loading-state.tsx
+++ b/src/components/loading-state.tsx
@@ -1,5 +1,11 @@
 export const LoadingState = () => (
-  <div className="p-4">
-    <p className="text-sm">Loading...</p>
+  <div style={{
+    padding: '10vh 1rem',
+    textAlign: 'center',
+    color: '#999',
+    height: '100%',
+    fontStyle: 'italic',
+  }}>
+    <p>Loading...</p>
   </div>
 );
diff --git a/src/components/production-block.tsx b/src/components/production-block.tsx
index 398d0fa..0ebe343 100644
--- a/src/components/production-block.tsx
+++ b/src/components/production-block.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-// @ts-ignore
 import { FileContext, FolderContext, RepoFiles } from "@githubnext/utils";
 
 interface ProductionBlockProps {
@@ -70,8 +69,15 @@ export const ProductionBlock = (props: ProductionBlockProps) => {
   const url = "https://github-blocks.vercel.app/block-testing"
 
   return (
-    <iframe className="w-full h-full border-none" src={url} title="Block testing" onLoad={() => setIframeIsLoaded(true)} ref={iframeElement}
-
+    <iframe style={{
+      height: "100%",
+      width: "100%",
+      border: "none",
+    }}
+      src={url}
+      title="Block testing"
+      onLoad={() => setIframeIsLoaded(true)}
+      ref={iframeElement}
     />
   )
 
diff --git a/src/index.css b/src/index.css
index 78a1c2b..c8eabbe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,10 @@
 /* ./src/index.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
 
 .sandbox-wrapper .sp-loading:before {
   content: "Loading...";
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index a698474..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-module.exports = {
-  darkMode: false, // or 'media' or 'class'
-  mode: "jit",
-  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [require("@tailwindcss/forms")({ strategy: "class" })],
-};
diff --git a/yarn.lock b/yarn.lock
index b9143c8..aa9a994 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1102,13 +1102,6 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@tailwindcss/forms@^0.3.4":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.3.4.tgz#e4939dc16450eccf4fd2029770096f38cbb556d4"
-  integrity sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==
-  dependencies:
-    mini-svg-data-uri "^1.2.3"
-
 "@tailwindcss/line-clamp@^0.2.0":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.2.2.tgz#05843c004bf069353a0c43f9df8cc3a6016252b8"
@@ -1769,7 +1762,7 @@ assert@^2.0.0:
     object-is "^1.0.1"
     util "^0.12.0"
 
-autoprefixer@^10.2.5, autoprefixer@^10.4.0:
+autoprefixer@^10.2.5:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.0.tgz#c3577eb32a1079a440ec253e404eaf1eb21388c8"
   integrity sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==
@@ -5707,11 +5700,6 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
-mini-svg-data-uri@^1.2.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz#43177b2e93766ba338931a3e2a84a3dfd3a222b8"
-  integrity sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==
-
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -6315,7 +6303,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^8.1.6, postcss@^8.1.8, postcss@^8.2.1, postcss@^8.3.11, postcss@^8.3.8:
+postcss@^8.1.6, postcss@^8.1.8, postcss@^8.2.1, postcss@^8.3.8:
   version "8.3.11"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
   integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
@@ -7653,7 +7641,7 @@ supports-color@^8.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-tailwindcss@^2.2.19, tailwindcss@^2.2.7:
+tailwindcss@^2.2.7:
   version "2.2.19"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.19.tgz#540e464832cd462bb9649c1484b0a38315c2653c"
   integrity sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==