Widget:Droflax

Mohji

Tier: Bronze

Clase: Bruiser/Especialista

       <img src="https://preview.redd.it/salome-the-goofy-snake-vs-richie-the-fat-lion-v0-r760m3dlo9yc1.png?width=640&crop=smart&auto=webp&s=815cebcad832c69d3906456ffb87d4b555e84100" alt="Arte del personaje">

       <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
       <button class="tab-btn" data-tab="skins">Skins</button>

<script>

   (function() {
       const buttons = document.querySelectorAll(".tab-btn");
       const contents = document.querySelectorAll(".tab-content");

       buttons.forEach(btn => {
           btn.addEventListener("click", () => {
               buttons.forEach(b => b.classList.remove("active"));
               contents.forEach(c => c.classList.remove("active"));

               btn.classList.add("active");
               const tab = btn.getAttribute("data-tab");
               document.getElementById(tab).classList.add("active");
           });
       });
   })();

</script>

<style>

   .personaje-box {
       background: #1e1e1e;
       border-radius: 12px;
       padding: 16px;
       color: #fff;
       font-family: 'Segoe UI', sans-serif;
       max-width: 1100px;
       margin: auto;
       border: 2px solid #444;
   }

   .personaje-header {
       display: flex;
       gap: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
       flex-direction: column;
   }

   .personaje-header img {
       width: 160px;
       position:absolute;
       right:10%;
     
   }

   .personaje-info .nombre {
       font-size: 32px;
       font-weight: bold;
   }

   .personaje-info .tier,
   .personaje-info .clase {
       font-size: 16px;
       color: #bbb;
   }

   .personaje-tabs {
       margin-block: 4px;
       display: flex;
       gap: 12px;
       justify-content: flex-start;
   }

   .tab-btn {
       padding: 8px 20px;
       background: #333;
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 18px;
       cursor: pointer;
   }

   .tab-btn.active {
       background: #007bff;
       font-weight: bold;
   }

   .tab-content {
       display: none;
       margin-top: 20px;
       animation: fadeIn 0.4s ease;
   }

   .tab-content.active {
       display: block;
   }

   .prueba {
       background-color: #ffffff;
       width: 40vw;
       height: 20vh;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

</style>