Widget:Droflax

<style> .char-box {

 border: 2px solid #444;
 border-radius: 12px;
 padding: 20px;
 background: #1e1e1e;
 color: white;
 font-family: 'Segoe UI', sans-serif;
 max-width: 900px;
 margin: auto;

}

.char-header {

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

}

.char-header img {

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

}

.char-info {

 display: flex;
 flex-direction: column;
 gap: 5px;

}

.char-info .name {

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

}

.char-info .tier {

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

}

.tabs {

 margin-top: 20px;
 display: flex;
 gap: 10px;

}

.tab-button {

 padding: 8px 16px;
 background: #333;
 color: white;
 border: none;
 cursor: pointer;
 border-radius: 6px;
 transition: background 0.3s;

}

.tab-button:hover {

 background: #555;

}

.tab-button.active {

 background: #007bff;
 font-weight: bold;

}

.tab-content {

 margin-top: 20px;

}

.hidden {

 display: none;

} </style>

   <img src="{{{imagen}}}" alt="Arte del personaje">

{{{nombre}}}

Tier: {{{tier}}}

Clase: {{{clase}}}

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

   Predefinição:Persona

   Predefinição:Skins

<script> (function() {

 const buttons = document.querySelectorAll(".tab-button");
 const contents = document.querySelectorAll(".tab-content");

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

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

})(); </script>