tailwind progress

dist/index.html

@@ -15,20 +15,11 @@
 
   <link rel="apple-touch-icon" href="icon-192.png" />
   <link rel="manifest" href="manifest.json" />
+  <link href="app.css" rel="stylesheet">
   <title>CAD Tool</title>
 
   <style>
-    html,
-    body {
-      margin: 0;
-      height: 100%;
-    }
 
-    #c {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
 
 
   </style>

src/app.css

@@ -1,19 +1,22 @@
-
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-.buttons-group {
+html,
-  position: absolute;
+body {
-  left:0;
+  margin: 0;
-  display: flex;
+  height: 100%;
-  flex-direction: column;
+}
+
+#c {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 
-/* .feature-tree {
+@layer components {
-  color: red;
+  .btn-blue {
-  position: absolute;
+    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded cursor-pointer
-  right:0;
+  }
-} */
+}

src/app.jsx

@@ -38,17 +38,23 @@ const App = () => {
 
   return <>
 
-    <div className='buttons-group'>
+    <div className='absolute left-0 flex flex-col'>
+    {/* <div className='buttons-group'> */}
       {activeSketchNid ?
-        <button onClick={() => treeEntries.byNid[activeSketchNid].deactivate()}>
+        <div
+        className='btn-blue'
+         onClick={() => treeEntries.byNid[activeSketchNid].deactivate()}>
           Exit sketch
-        </button> :
+        </div> :
-        <button onClick={sc.addSketch}> addsketch </button>
+        <div 
+        className='btn-blue'
+        onClick={sc.addSketch}> addsketch </div>
       }
       <button onClick={() => sc.extrude(treeEntries.byNid[activeSketchNid])}> extrude </button>
       {/* <button onClick={() => setState('')}> test </button> */}
     </div>
 
+
     <div className='absolute right-0'>
       {treeEntries.allNids.map((entId, idx) => (
         <div className='text-red-700 text-4xl' key={idx}