User:Axe Hack/Sandbox

 <input type="radio" id="tab1" name="tab-control" checked>
 <input type="radio" id="tab2" name="tab-control">
 <input type="radio" id="tab3" name="tab-control">

• <label for="tab1" role="button">About Me</label>
• <label for="tab2" role="button">Projects</label>
• <label for="tab3" role="button">Contact</label>

   <section>

About Me

Welcome to my user page! I am YourUsernameHere, and I enjoy contributing to this wiki by adding content related to Your Topics.

   </section>

   <section>

Current Projects

• Project 1: Brief description of the project
• Project 2: Brief description of the project

   </section>

   <section>

Contact Me

If you'd like to collaborate, feel free to leave me a message on my talk page.

   </section>

<style>

 .tabs {
   position: relative;
   margin-top: 20px;
 }
 .tabs input[type="radio"] {
   display: none;
 }
 .tabs ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: #0073e6;
 }
 .tabs ul li {
   flex-grow: 1;
 }
 .tabs ul li label {
   display: block;
   padding: 10px;
   text-align: center;
   background-color: #0073e6;
   color: white;
   cursor: pointer;
   transition: background-color 0.3s;
 }
 .tabs ul li label:hover {
   background-color: #005bb5;
 }
 .tabs input[type="radio"]:checked + label {
   background-color: #005bb5;
 }
 .tabs .content section {
   display: none;
   padding: 10px;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   margin-top: -1px;
 }
 #tab1:checked ~ .content section:nth-of-type(1),
 #tab2:checked ~ .content section:nth-of-type(2),
 #tab3:checked ~ .content section:nth-of-type(3) {
   display: block;
 }

</style>