positioning card name label

frontend/src/main/scala/industries/sunshine/planningpoker/TableView.scala

@@ -66,11 +66,11 @@ object TableView {
     }
 
     div(
-      className := "w-20 h-40 m-1 rounded flex flex-col justify-center items-center m-3",
+      className := "w-20 h-40 m-1 rounded m-3 relative",
       className <-- cardTypeStyle,
       // the diagonal card value \ place text
       div(
-        className := "-rotate-45 text-xl",
+        className := "-rotate-45 text-xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
         child.text <-- state.map {
           case NoCard(name)   => name
           case CardBack(name) => name
@@ -79,13 +79,12 @@ object TableView {
       ),
       // name under viewing the votes
       div(
-        className := "text-xl",
+        className := "text-xl absolute bottom-1 left-1/2  transform -translate-x-1/2",
         child.text <-- state.map {
           case Open(name, _) => name
-          case _ => ""
+          case _             => ""
         }
       )
-
     )
   }