JSFiddle - React, Tailwind, and code Playground

by von

HTML

<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Document</title>
    <style>
      .option-card-item input:checked ~ .card {
        border: 2px solid blue;
        transform: translate(-5px, -5px);
      }
      .option-card-container .card {
        margin: auto;
      }
      .option-card-container .card:hover {
        transition: all 300ms;
      }
      .option-card-container .card:hover {
        transform: translate(-5px, -5px);
      }
    </style>
    <script id="option-script">
    let options = [{"id":1605718437976,"title":"yahoo.com","image":"https://via.placeholder.com/200x200","correct":false,"validImage":false},{"id":1605718443655,"title":"google","image":"https://via.placeholder.com/200x200","correct":false,"validImage":false}]
  </script>
  </head>
  <body data-options="[]" class="">
    <div class="container">
      <div class="option-card-container d-flex flex-wrap"><div class="option-card-item" style="flex: 50%; max-width: 50%;">
          <input type="checkbox" id="1605718437976" class="option-select" hidden="">
          <div class="card card-option" style="width: 210px">
            <img class="card-img-top" src="https://via.placeholder.com/200x200" alt="Card image" style="width: 100%">
            <div class="card-body align-items-center d-flex justify-content-center">
              yahoo.com
            </div>
          </div>
        </div>
<div class="option-card-item" style="flex: 50%; max-width: 50%;">
          <input type="checkbox" id="1605718443655"...