Begin styling efforts

Start styling the Chord Drill Sergeant for mobile devices because that is that
device on which I will primarily use CDS.

I'm also deleting the debugger related code. I would like to support a debugger,
but I'm not currently using this one, so I am going to remove it to keep things
slender.

- Introduce TailwindCSS, which also introduced elm-live, index.html, index.css
- Add mobile-first styling for the preferences modal
- Remove unused code

1 files changed, 9 insertions, 12 deletions

diff --git a/website/sandbox/chord-drill-sergeant/src/Tempo.elm b/website/sandbox/chord-drill-sergeant/src/Tempo.elm
index 270cc5bd6dc6..50485c4c0aba 100644
--- a/website/sandbox/chord-drill-sergeant/src/Tempo.elm
+++ b/website/sandbox/chord-drill-sergeant/src/Tempo.elm
@@ -3,25 +3,22 @@ module Tempo exposing (render)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import UI
 
 
 type alias Props msg =
     { tempo : Int
-    , handleIncrease : msg
-    , handleDecrease : msg
     , handleInput : String -> msg
     }
 
 
 render : Props msg -> Html msg
-render { tempo, handleIncrease, handleDecrease, handleInput } =
-    div []
-        [ p [] [ text (String.fromInt tempo ++ " BPM") ]
-        , button [ onClick handleDecrease ] [ text "Slower" ]
-        , input
-            [ onInput handleInput
-            , placeholder "Set tempo..."
-            ]
-            []
-        , button [ onClick handleIncrease ] [ text "Faster" ]
+render { tempo, handleInput } =
+    div [ class "text-center" ]
+        [ p [ class "text-5xl py-10" ] [ text (String.fromInt tempo ++ " BPM") ]
+        , UI.textField
+            { placeholderText = "Set tempo..."
+            , handleInput = handleInput
+            , classes = []
+            }
         ]