ditch boostrap and use tailwind instead

components/reason.js

@@ -2,48 +2,58 @@ import React, { useContext } from 'react'
 import { WizardContext } from '../context/wizardStore'
 import Required from './required'
 
-import Form from 'react-bootstrap/Form'
-
 export default function Contact() {
   const { state, onChangeEvent } = useContext(WizardContext)
 
+  const { formDataChanged } = state
   const { purpose, destination, org } = state.formData
 
   return (
     <>
-      <Form.Group>
-        <Form.Label>
-          Zweck der Fahrt <Required />
-        </Form.Label>
-        <Form.Control
-          type="text"
-          name="purpose"
-          value={purpose}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Verein</Form.Label>
-        <Form.Control
-          type="text"
-          name="org"
-          value={org}
-          onChange={onChangeEvent}
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>
-          Ziel der Fahrt <Required />
-        </Form.Label>
-        <Form.Control
-          type="text"
-          name="destination"
-          value={destination}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Zweck der Fahrt <Required />
+          </label>
+          <input
+            type="text"
+            name="purpose"
+            value={purpose}
+            onChange={onChangeEvent}
+            required
+            className={`input-text ${
+              formDataChanged.includes('purpose') && 'input-changed'
+            }`}
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Ziel der Fahrt <Required />
+          </label>
+          <input
+            type="text"
+            name="destination"
+            value={destination}
+            onChange={onChangeEvent}
+            required
+            className="input-text"
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">Verein</label>
+          <input
+            type="text"
+            name="org"
+            value={org}
+            onChange={onChangeEvent}
+            className="input-text"
+          />
+        </div>
+      </div>
     </>
   )
 }