JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div class="tabordion">
  <section id="section1">
    <input type="radio" name="sections" id="option1" checked>
    <label for="option1">John Lennon</label>
    <article>
      <h2>John Lennon</h2>
      <p>John Ono Lennon, (born John Winston Lennon; 9 October 1940 – 8 December 1980), was an English musician, singer and songwriter who rose to worldwide fame as a founder member of the rock band the Beatles, the most commercially successful band in the history of popular music. With Paul McCartney, he formed a songwriting partnership that is one of the most celebrated of the 20th century.</p>
      <p>Born and raised in Liverpool, as a teenager Lennon became involved in the skiffle craze; his first band, the Quarrymen, evolved into the Beatles in 1960. When the group disbanded in 1970, Lennon embarked on a solo career that produced the critically acclaimed albums John Lennon/Plastic Ono Band and Imagine, and iconic songs such as "Give Peace a Chance" and "Working Class Hero". After his marriage to Yoko Ono in 1969, he changed his name to John Ono Lennon. Lennon disengaged himself from the music business in 1975 to raise his infant son Sean, but re-emerged with Ono in 1980 with the new album Double Fantasy. He was murdered three weeks after its release.</p>
    </article>
  </section>
  <section id="section2">
    <input type="radio" name="sections" id="option2">
    <label for="option2">Paul McCartney</label>
    <article>
      <h2>Paul McCartney</h2>
      <p>Sir James Paul McCartney, (born 18 June 1942), is an English musician, singer, songwriter, multi-instrumentalist, and composer. With John Lennon, George Harrison and Ringo Starr, he gained worldwide fame as a member of the Beatles, widely regarded as one of the most popular and influential acts in the history of rock music; his songwriting partnership with Lennon is one of the most celebrated of the 20th century. After the band's break-up, he pursued a solo career and later formed Wings with his first wife,...

CSS

.tabordion {
  color: #000;
  display: block;
  font-family: arial, sans-serif;
  margin: 20px;
  position: relative;
  width: 500px;
	text-align: justify;
}

.tabordion input[name="sections"] {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

.tabordion section {
  display: block;
}

.tabordion section label {
  background: #ccc;
  border: 1px solid #fff;
  cursor: pointer;
  display: block;
  font-size: 14pt;
  font-weight: bold;
  padding: 10px;
  position: relative;
  width: 150px;
  z-index: 120;
}

.tabordion section article {
  display: none;
  left: 230px;
  min-width: 300px;
  padding: 0 0 0 20px;
  position: absolute;
  top: 0;
}

.tabordion section article:after {
  background-color: #ccc;
  bottom: 0;
  content: "";
  display: block;
  left: -229px;
  position: absolute;
  top: 0;
  width: 150px;
  z-index: 1;
}

.tabordion input[name="sections"]:checked+label {
  background: #eee;
  color: #bbb;
}

.tabordion input[name="sections"]:checked~article {
  display: block;
}


@media (max-width: 533px) {

  h1 {
    width: 100%;
  }

  .tabordion {
    width: 100%;
  }

  .tabordion section label {
    font-size: 1em;
    width: 160px;
  }

  .tabordion section article {
    left: 200px;
    min-width: 200px;
  }

  .tabordion section article:after {
    background-color: #ccc;
    bottom: 0;
    content: "";
    display: block;
    left: -199px;
    position: absolute;
    top: 0;
    width: 200px;

  }

}


@media (max-width: 768px) {
  h1 {
    width: 96%;
  }

  .tabordion {
    width: 100px;
  }
}


@media (min-width: 1366px) {
  h1 {
    width: 70%;
  }

  .tabordion {
    width: 70%;
  }
}