JSFiddle - React, Tailwind, and code Playground

by woke_mushroom

HTML

<html lang="en">

<head>
  <title>TEST Interactive Map</title>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--Other CSS-->
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <!-- Bootstrap CSS -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
  <!-- Poppins font -->

</head>

<body>
  <div class="interactive-map" >
  <img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
  <div class="card" style="width:40%; height: 10%;">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>
  <map name="image_map">
  <area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
  <area title="Green" coords="132,30,194,67" shape="rect">
  <area title="Blue" coords="22,147,74,192" shape="rect">
  <area title="Yellow" coords="131,144,197,188" shape="rect">
</map>

</div>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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.0/js/bootstrap.min.js"></script>
</body>

</html>

CSS

area{
    cursor: pointer;    
}