JSFiddle - React, Tailwind, and code Playground

by M J

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-12 d-flex flex-wrap">
          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't1')">This Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>
          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't2')">That Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>

          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't3')">This Other Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>
          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't4')">This Long Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>


          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't5')">This Really Long Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>
          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't6')">That Kinda Long Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>


          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't7')">Short Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>
          <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't8')">Another Short Section<img src="https://svgshare.com/i/fPK.svgg" class="icon-arrow-new" /></a>
        </div>
        <div class="col-md-6 col-sm-12 d-none d-md-block">
          <div id="t1" class="tabcontent">
            <p>image 1</p>
          </div>

       ...

CSS

.custom-btn, .custom-btn:visited {
    position: relative; 
    padding: 1.5rem 0.5rem;
    margin: 0.5rem 0.5rem;  
    font-size: 0.95rem;
    border-radius: 0;
    line-height: 1.2rem;
    background-color: #c1c1c1;
    border-color: #c1c1c1;
    flex: 33%;
    text-transform: uppercase;
    color:#fff;
    box-sizing: border-box;
    letter-spacing: 0.8px;

  }
  .custom-btn:active, .custom-btn:hover {
    background-color: #7d7c7c;
    border-color: #787878;
    text-transform: uppercase;
    color:#fff;

  }
  .float-icon{
    position: absolute;
    display: block;
    right:10px; 

  }
  .icon-arrow-new{
    position: absolute;
    right:10px; 
    width: 22px;
  }
  #t2,  #t3,  #t4,  #t5,  #t6,  #t7,  #t8 {
      display:none;
  }

JavaScript

function openRegion(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }