JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<input type='radio' name='tabs' id='tab1' />
<input type='radio' name='tabs' id='tab2' />
<input type='radio' name='tabs' id='tab3' />
<input type='radio' name='tabs' id='tab4' checked='checked' />
<ul>
  <li><label for='tab1'>Tab 1</label></li>
  <li><label for='tab2'>Tab 2</label></li>
  <li><label for='tab3'>Tab 3</label></li>
  <li><label for='tab4'>Tab 4</label></li>
</ul>
<main>
  <div id='content-1'>aaaa</div>
  <div id='content-2'>bbbb</div>
  <div id='content-3'>cccc</div>
  <div id='content-4'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt ac ligula vitae bibendum. Nunc porttitor eros nisl, vel sagittis justo bibendum vitae. Fusce at justo eu enim condimentum gravida vitae nec metus. Morbi sit amet velit malesuada, convallis odio vitae, tempus purus. Donec sed nunc elit. Donec fringilla, turpis sit amet accumsan accumsan, est sapien sagittis enim, sed scelerisque tortor libero mollis risus. Quisque id laoreet sapien, ac dapibus est. Suspendisse id turpis aliquet, dignissim massa id, porttitor erat. Duis sodales lacus in vulputate congue. Donec sed aliquam lacus, a hendrerit erat. Suspendisse potenti. Aliquam sit amet consequat odio. Maecenas condimentum eros bibendum diam interdum condimentum. Nulla non lacus a urna hendrerit porta.</p>

<p>Vivamus vehicula, diam at laoreet scelerisque, nunc risus volutpat felis, vel blandit erat justo sed nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus lacinia vulputate. Curabitur tristique erat massa, et imperdiet mi aliquet ac. Donec vitae rhoncus elit, eget aliquet mauris. Donec imperdiet lectus eget nibh fringilla, at gravida odio volutpat. Quisque maximus scelerisque justo vel mollis.</p>

<p>Nullam aliquam et justo a porttitor. Cras nec orci sagittis, facilisis ligula in, maximus lectus. Cras suscipit libero quis commodo varius. Integer dictum dolor sit amet tellus dignissim, a sagittis neque facilisis. Nulla varius purus sed enim congue...

CSS

html {
  height: 100vh;
  /*display: grid;
  grid-template-rows: 1fr;*/
}
body {
  height: 100vh;
  max-height: 100%;
  margin: 0;
  padding: 7px;
  box-sizing: border-box;
  display: grid;
  /* grid-template-rows: auto 1fr; */
  grid-template-rows: auto minmax(0, 1fr);
}
body > input[type='radio'] {
  display: none;
}
ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px black;
}
label {
  display: block;
  padding: 10px;
  border-top: solid 1px black;
  border-left: solid 1px black;
  border-bottom: solid 1px black;
  margin-bottom: -1px;
  background-color: #fcfcfc;
  cursor: pointer;
}
ul > li:last-of-type > label {
  border-right: solid 1px black;
}
div[id^='content'] {
  max-height: 100%;
  display: block;
  padding: 10px;
  border: solid 1px black;
  border-top-style: none;
  background-color: white;
  overflow: auto;
  text-align: justify;
}
main {
  /*position: relative;
  height: 500px;*/
  display: grid;
}
main > div {
  /*position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;*/
  grid-row-start: 1;
  grid-column-start: 1;
  z-index: -1;
  transition: 500ms ease;
  transition-property: visibility, z-index, opacity;
  opacity: 0;
  visibility: hidden;
}
#tab1:checked ~ main > #content-1,
#tab2:checked ~ main > #content-2,
#tab3:checked ~ main > #content-3,
#tab4:checked ~ main > #content-4 {
  visibility: visible;
  z-index: 1;
  opacity: 1;
}
#tab1:checked ~ ul > li > label[for='tab1'],
#tab2:checked ~ ul > li > label[for='tab2'],
#tab3:checked ~ ul > li > label[for='tab3'],
#tab4:checked ~ ul > li > label[for='tab4'] {
  border-bottom-color: white;
  background-color: white;
}