change CSS to tailwind

Author: apsinghdev

client/src/App.css

@@ -1,4 +1,3 @@
-
 #root {
     height: 100vh;
     width: 100vw;
@@ -28,14 +27,14 @@
     width: 100%;
  }
 
- #sidebar{
+ /* #sidebar{
     display: flex;
     flex-direction: column;
     padding: 5px;
     width: 250px;
     background-color: #202020;
     padding-left: 15px;
- }
+ } */
   .input-container {
     display: block;
     margin-top: 40px;

client/src/App.jsx

@@ -113,16 +113,15 @@ function App() {
 
   return (
     <div id="container" style={{ display: "flex" }}>
-      <div id="sidebar" ref={sidebarRef}>
+      <div
+        id="sidebar"
+        className="flex flex-col p-1 w-64 bg-gray-900 pl-4"
+        ref={sidebarRef}
+      >
         <h1 id="drawRTC">drawRTC</h1>
         <div className="input-container" id="colorpicker">
           <label htmlFor="stroke">Stroke</label>
-          <input
-            id="stroke"
-            name="stroke"
-            type="color"  
-            onChange={addStroke}
-          />
+          <input id="stroke" name="stroke" type="color" onChange={addStroke} />
         </div>
         <div className="input-container" id="linewidth">
           <label htmlFor="lineWidth">Line Width</label>