AnonyFriday/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>

    <div class="tabs">

      <input type="radio" id="tab1" name="mytabs" checked>
      <label for="tab1">Free</label>

      <input type="radio" id="tab2" name="mytabs">
      <label for="tab2">Silver</label>

      <input type="radio" id="tab3" name="mytabs">
      <label for="tab3">Gold</label>


      <div class="tabs--content">
        <div class="content">
          <h2>Free</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, quaerat perferendis quia odio provident
            aliquam vitae voluptates illo atque autem, expedita sequi ex magnam at similique temporibus dolor eius
            dolorum!
          </p>
        </div>
        <div class="content">
          <h2>Silver</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, quaerat perferendis quia odio provident
            aliquam vitae voluptates illo atque autem, expedita sequi ex magnam at similique temporibus dolor eius
            dolorum!
          </p>
        </div>
        <div class="content">
          <h2>Gold</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, quaerat perferendis quia odio provident
            aliquam vitae voluptates illo atque autem, expedita sequi ex magnam at similique temporibus dolor eius
            dolorum!
          </p>
        </div>
      </div>
    </div>

  </body>

</html>

## reset.scss
*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    background-color: turquoise;
}

a {
    text-decoration: none;
}

## tabs.scss
.tabs {
    max-width: 400px;
    margin: 20vh auto;
    display: flex;
    flex-wrap: wrap;

    input[type="radio"] {
        display: none;
    }

    label {
        display: inline-block;
        background-color: rgb(254, 250, 211);
        line-height: 3rem;
        padding: 0 2rem;
    }

    &--content {
        div {
            width: 400px;
            height: 200px;
            max-width: 400px;
            min-width: 300px;
            padding: 1rem;
            background-color: aliceblue;
            display: none;

            h2 {
                margin-bottom: 1rem;
                background-color: bisque;
                display: inline-block;
                line-height: 2rem;
                padding: 0 1rem;
                border-radius: 1rem;
            }

            p {
                background-color: powderblue;
                padding: 1rem 1rem;
                border-radius: 1rem;
                font-size: 1rem;

                height: auto;
            }
        }
    }

    // Effects
    input:nth-of-type(1):checked ~ .tabs--content div:nth-of-type(1) {
        display: block;
    }

    input:nth-of-type(2):checked ~ .tabs--content div:nth-of-type(2) {
        display: block;
    }

    input:nth-of-type(3):checked ~ .tabs--content div:nth-of-type(3) {
        display: block;
    }

    input[type="radio"]:checked + label {
        background-color: aliceblue;
        border-top: 2px solid salmon;
    }

    // input[id="tab2"]:checked ~ .tab--content {
    //     display: block;
    // }

    // input[id="tab3"]:checked ~ .tab--content {
    //     display: block;
    // }
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/style.css">
	</head>

	<body>

	<div class="tabs">

	<input type="radio" id="tab1" name="mytabs" checked>
	<label for="tab1">Free</label>

	<input type="radio" id="tab2" name="mytabs">
	<label for="tab2">Silver</label>

	<input type="radio" id="tab3" name="mytabs">
	<label for="tab3">Gold</label>


	<div class="tabs--content">
	<div class="content">
	<h2>Free</h2>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, quaerat perferendis quia odio provident
	aliquam vitae voluptates illo atque autem, expedita sequi ex magnam at similique temporibus dolor eius
	dolorum!
	</p>
	</div>
	<div class="content">
	<h2>Silver</h2>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, quaerat perferendis quia odio provident
	aliquam vitae voluptates illo atque autem, expedita sequi ex magnam at similique temporibus dolor eius
	dolorum!
	</p>
	</div>
	<div class="content">
	<h2>Gold</h2>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, quaerat perferendis quia odio provident
	aliquam vitae voluptates illo atque autem, expedita sequi ex magnam at similique temporibus dolor eius
	dolorum!
	</p>
	</div>
	</div>
	</div>

	</body>

	</html>
	*,
	*::after,
	*::before {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	html,
	body {
	height: 100vh;
	background-color: turquoise;
	}

	a {
	text-decoration: none;
	}
	.tabs {
	max-width: 400px;
	margin: 20vh auto;
	display: flex;
	flex-wrap: wrap;

	input[type="radio"] {
	display: none;
	}

	label {
	display: inline-block;
	background-color: rgb(254, 250, 211);
	line-height: 3rem;
	padding: 0 2rem;
	}

	&--content {
	div {
	width: 400px;
	height: 200px;
	max-width: 400px;
	min-width: 300px;
	padding: 1rem;
	background-color: aliceblue;
	display: none;

	h2 {
	margin-bottom: 1rem;
	background-color: bisque;
	display: inline-block;
	line-height: 2rem;
	padding: 0 1rem;
	border-radius: 1rem;
	}

	p {
	background-color: powderblue;
	padding: 1rem 1rem;
	border-radius: 1rem;
	font-size: 1rem;

	height: auto;
	}
	}
	}

	// Effects
	input:nth-of-type(1):checked ~ .tabs--content div:nth-of-type(1) {
	display: block;
	}

	input:nth-of-type(2):checked ~ .tabs--content div:nth-of-type(2) {
	display: block;
	}

	input:nth-of-type(3):checked ~ .tabs--content div:nth-of-type(3) {
	display: block;
	}

	input[type="radio"]:checked + label {
	background-color: aliceblue;
	border-top: 2px solid salmon;
	}

	// input[id="tab2"]:checked ~ .tab--content {
	// display: block;
	// }

	// input[id="tab3"]:checked ~ .tab--content {
	// display: block;
	// }
	}