JSFiddle - React, Tailwind, and code Playground

by amit kumar

HTML

<!doctype html>
<html>
<head>
</head>
<body>
<div class="tooltip">
  click on button to show me just near to clicked button
</div>
<div class="header">
My project
</div>
<div class="pagecontent">
  <div class="row">
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
   <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
 <div class="rowContent">
      <button>click me to show tooltip</button>
   </div>
    
    
   
  </div>
  
</div>
</div>
</body>
</body>
</head>
</html>

CSS

.header{background:#000; height:70px; color:#fff;}
.pagecontent {
  height: 700px;
  overflow: auto;
}
.row{
  width: 700px;
  overflow: hidden;
}
.rowContent{
  width: 1500px;
  overflow:auto;
  margin-top: 40px;
}
.tooltip {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  color: #fff;
}