JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="strength">
  <div class="strengthLayout">
    <div class="strengthIcon">
      <img alt="FirstImage" width="70%" src="../assets/Smiley.png" class="smiley" id="1">
      <img alt="SecondImage" width="70%" src="../assets/Smiley2.png" class="smiley2" id="2">
      <img alt="ThirdImage" width="70%" src="../assets/Smiley3.png" class="smiley3" id="3">
      <img alt="FourthImage" width="70%" src="../assets/Smiley4.png" class="smiley4" id="4">
      <img alt="FithImage" width="70%" src="../assets/Smiley5.png" class="smiley5" id="5">
    </div>
    <div class="strengthScale">
      <button id="as1" class="Rate1" ref="bt1" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @right="setFocus" @keypress="submit">1</button>
      <button id="as2" class="Rate2" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">2</button>
      <button class="Rate3" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">3</button>
      <button class="Rate4" v-focus data-default data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit" autofocus>4</button>
      <button class="Rate5" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">5</button>
      <button class="Rate6" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">6</button>
      <button class="Rate7" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">7</button>
      <button class="Rate8" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">8</button>
      <button class="Rate9" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">9</button>
      <button class="Rate10" v-focus data-right='AUTOFOCUS' data-left='AUTOFOCUS' @keypress="submit">10</button>
    </div>
    <div class="PainText">
      <div class="PainText1">Sehr schwache <br> Schmerzen</div>
      <div class="PainText2">Sehr starke <br> Schmerzen</div>
    </div>
  </div>
  <Footer></Footer>
</div>

CSS

.strength {
   display: grid;
   height: 100vh;
   width: 70%;
   grid-template-rows: 75% 25%;
 }

 .strengthLayout {
   display: grid;
   grid-template-rows: repeat(3, [row] 1fr);
 }

 .strengthIcon {
   display: grid;
   grid-template-columns: repeat(5, [col] 1fr);
 }

 .strengthScale {
   display: grid;
   grid-template-columns: repeat(10, [col] 1fr);
 }

 .PainText {
   display: grid;
   grid-template-rows: repeat(2, [col] 1fr);
 }

 .smiley {
   grid-column: 1;
   place-self: center;
   justify-self: center;
 }

 .showBorder {
   border-radius: 100%;
   border: 4px solid black;
 }

 .smiley2 {
   grid-column: 2;
   place-self: center;
   justify-self: center;
 }

 .smiley3 {
   grid-column: 3;
   place-self: center;
   justify-self: center;
 }

 .smiley4 {
   grid-column: 4;
   place-self: center;
   justify-self: center;
 }

 .smiley5 {
   grid-column: 5;
   place-self: center;
   justify-self: center;
 }

 .Rate1 {
   grid-column: 1;
   place-self: center;
   justify-self: center;
   background-color: #7BC618;
   height: 80px;
   width: 70px;
   font-size: 40px;
   border-radius: 20px;
   padding: 0px;
 }

 .Rate1:focus {
   padding-top: 40px;
   padding-bottom: 80px;
   border: 4px solid black;
 }

 .Rate2 {
   grid-column: 2;
   place-self: center;
   justify-self: center;
   background-color: #C8E01F;
   height: 80px;
   width: 70px;
   font-size: 40px;
   border-radius: 20px;
 }

 .Rate2:focus {
   padding-top: 40px;
   padding-bottom: 80px;
   border: 4px solid black;
 }

 .Rate3 {
   grid-column: 3;
   place-self: center;
   justify-self: center;
   background-color: #FCF223;
   height: 80px;
   width: 70px;
   font-size: 40px;
   opacity: 0.9;
   border-radius: 20px;
 }

 .Rate3:focus {
   padding-top: 40px;
   padding-bottom: 80px;
   border: 4px solid black;
 }

 .Rate4 {
   grid-column: 4;
   place-self: center;
   justify-self: center;
   background-color: #F7D925;
   height: 80px;
   width: 70px;
   font-size: 40px;
   opacity: 0.9;
  ...

JavaScript

import Footer from './Footer';
  import {
    navigationService
  } from "vue-spatialnavigation";

  export default {
    name: 'Strength',
    components: {
      Footer,
    },
    methods: {
      submit: function() {
        this.$router.push({
          path: '/type'
        })
      },
    }
  }