<h1>Pure CSS Tabs</h1>
<div class="container">
  
  <ul class="tabs">
    <a href="#tab-1">Tab 1</a>
    <a href="#tab-2">Tab 2</a>
    <a href="#tab-3">Tab 3</a>
  </ul>
  
	<div class="tab-content">
		<div id="tab-1" class="tab">
      <h2>Tab 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit cursus fringilla. Fusce dapibus massa faucibus rutrum laoreet. Curabitur dignissim vulputate orci in iaculis. Duis convallis, est ut gravida blandit, lorem risus convallis nunc, sit amet tempor mi ante vel ex. Donec vel erat ac libero fermentum condimentum. Donec vitae faucibus arcu. Vestibulum a maximus nisi. Curabitur sed iaculis velit, sit amet venenatis est. In quis vestibulum lorem, at fermentum enim. Integer blandit mi in leo scelerisque mattis. Nam pharetra commodo felis vel venenatis. Morbi fringilla ipsum augue, quis egestas erat dapibus nec. Suspendisse et lobortis turpis. Cras aliquam, massa in sodales placerat, nunc nulla imperdiet risus, nec rutrum mi tortor in ante.</p>
		</div>
    <div id="tab-2" class="tab">
      <h2>Tab 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit cursus fringilla. Fusce dapibus massa faucibus rutrum laoreet. Curabitur dignissim vulputate orci in iaculis. Duis convallis, est ut gravida blandit, lorem risus convallis nunc, sit amet tempor mi ante vel ex. Donec vel erat ac libero fermentum condimentum. Donec vitae faucibus arcu. Vestibulum a maximus nisi. Curabitur sed iaculis velit, sit amet venenatis est. In quis vestibulum lorem, at fermentum enim. Integer blandit mi in leo scelerisque mattis. Nam pharetra commodo felis vel venenatis. Morbi fringilla ipsum augue, quis egestas erat dapibus nec. Suspendisse et lobortis turpis. Cras aliquam, massa in sodales placerat, nunc nulla imperdiet risus, nec rutrum mi tortor in ante.</p>
		</div>
    <div id="tab-3" class="tab">
      <h2>Tab 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit cursus fringilla. Fusce dapibus massa faucibus rutrum laoreet. Curabitur dignissim vulputate orci in iaculis. Duis convallis, est ut gravida blandit, lorem risus convallis nunc, sit amet tempor mi ante vel ex. Donec vel erat ac libero fermentum condimentum. Donec vitae faucibus arcu. Vestibulum a maximus nisi. Curabitur sed iaculis velit, sit amet venenatis est. In quis vestibulum lorem, at fermentum enim. Integer blandit mi in leo scelerisque mattis. Nam pharetra commodo felis vel venenatis. Morbi fringilla ipsum augue, quis egestas erat dapibus nec. Suspendisse et lobortis turpis. Cras aliquam, massa in sodales placerat, nunc nulla imperdiet risus, nec rutrum mi tortor in ante.</p>
		</div>
	</div>
  
</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');

body {
  background: linear-gradient(-45deg, #83a4d4, #b6fbff);
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

h1,
aside,
.container {
  margin: 0 auto 20px;
  max-width: 500px;
}

.container {
  background-color: #FFF;
  border-radius: 5px;
  margin: 0 auto;
  position: relative;
  transition: box-shadow 200ms;
  &:hover {
    box-shadow: 0 10px 50px -10px rgba(0,0,0,0.25);
  }
}
.tabs {
	width: 100%;
}
.tab-content {
  box-sizing: border-box;
  height: 400px;
  position: relative;
  .tab {
    background-color: #FFF;
    display: none;
    padding: 0 20px;
    position: absolute;
    &:first-child,
    &:target {
      display: block;
      z-index: 2;
    }
  }
}