Widget:Droflax

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

   <img src="https://ruta/a/imagen.jpg" alt="Arte del personaje">

Lucía

Tier: SS

Clase: Maga

<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: 1000px;
 margin: auto;
 border: 2px solid #444;

}

.personaje-header {

 display: flex;
 gap: 20px;
 border-bottom: 2px solid #555;
 padding-bottom: 10px;

}

.personaje-header img {

 width: 120px;
 border-radius: 10px;
 border: 2px solid #777;

}

.personaje-info .nombre {

 font-size: 28px;
 font-weight: bold;

}

.personaje-info .tier, .personaje-info .clase {

 font-size: 16px;
 color: #bbb;

}

.personaje-tabs {

 margin-top: 20px;
 display: flex;
 gap: 12px;
 justify-content: center;

}

.tab-btn {

 padding: 8px 20px;
 background: #333;
 color: white;
 border: none;
 border-radius: 8px;
 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;

}

@keyframes fadeIn {

 from { opacity: 0; }
 to { opacity: 1; }

} </style>