Widget:SupporterTabs

<style>

 /* Style the tab */
 
 div.tab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #943e00;
 }
 /* Style the buttons inside the tab */
 
 div.tab button {
   display: block;
   float: left;
   color: white;
   border-style: solid;
   border-width: 1px;
   border-color: #212121;
   background-color: #943e00;
   font-family: "Arial";
   letter-spacing: .5px;
   padding: 5px;
   overflow: hidden;
 }
 /* Change background color of buttons on hover */
 
 div.tab button:hover {
   background-color: #212121;
 }
 /* Create an active/current tablink class */
 
 div.tab button.active {
   background-color: #212121;
 }
 /* Style the tab content */
 
 .tabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
   background-color: #212121;
   }
  
  .txt {
    color:white;
  }
 

</style>

 <button class="tablinks" onclick="openBlock(event, 'Bandito')" id="defaultOpen">Bandito</button>
 <button class="tablinks" onclick="openBlock(event, 'Sunswords')">Sunswords</button>
 <button class="tablinks" onclick="openBlock(event, 'OTHER NAME')">OTHER NAME</button>

Bandito

 <img display="inline-block" src="https://wiki.urealms.com/images/5/54/Maelstrom_RadioactiveK.png" height="400" width="200">

Hello this is sample

Sunswords

Filler Text.

OTHER

Filler Text.

<script>

 function openBlock(evt, title) {

   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(title).style.display = "block";
   evt.currentTarget.className += " active";
 }
 document.getElementById("defaultOpen").click();

</script>