JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Good Cop, Bad Cop</title>
  <style>
    .view-image img {
      margin-left: 90px;
    }
  </style>
  <link rel="stylesheet" href="../CSS/landing.css" />
  <link rel="stylesheet" href="../CSS/coach_selection.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />

</head>

<body>
  <nav class="navbar navbar-custom">
    <div class="container-fluid">
      <a class="navbar-brand" href="">
        <img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
      </a>

      <a href="settings.html">
        <ul class="navbar-nav">
          <img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
        </ul>
      </a>
    </div>
  </nav>
  <div class="image">
    <div>
      <button type="button" id="dog-button" class="btn btn-light">
        <img src="../images/dog.png" id="dog" alt="dog">
      </button>
    </div>
    <div>
      <button type="button" id="mother-button" class="btn btn-light">
        <img src="../images/mother.png" id="mother" alt="mother">
      </button>
    </div>
    <div>
      <button type="button" id="soldier-button" class="btn btn-light">
        <img src="../images/military.png" id="soldier" alt="soldier">
      </button>
    </div>
    <div>
      <button type="button" id="teacher-button" class="btn btn-light">
        <img src="../images/teacher.png" id="teacher" alt="teacher">
      </button>
    </div>
   ...

CSS

.image {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  margin-top: 40px;
  margin-left: 50px;
}

.image img {
  cursor: pointer;
}

.image img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image #mother img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image img {
  width: 100px;
  height: 100px;
  text-align: center;
  padding: 10px;
  margin-left: 30%;
}

.button{
  width: 80px;
  height: 40px;
  text-align: center;
  margin: 10px auto 0px;
  display: flex;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}

.button:hover{
   background-color: #242424;
}
.button:active{
   background-color: #121212;
}

.button > span{
  color: #eeeeee;
  text-align: center;
}