JSFiddle - React, Tailwind, and code Playground

by Jennifer Perrin

HTML

<main>

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Codepen</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Dribbble</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Stack Overflow</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Bitbucket</label>

  <section id="content1">
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto
      pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
    <p>
      Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
    </p>
  </section>

  <section id="content2">
    <p>
      Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
    </p>
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto
      pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
  </section>

  <section id="content3">
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto
      pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet...

CSS

@-webkit-keyframes showTab {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes showTab {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.tabsy>button {
  width: 100%;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  outline: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent
}

.tabsy>.tabButton {
  display: block;
  margin-top: 1px;
  background: #5a5243;
  color: #f5f5f5;
  text-align: center;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out
}

.tabsy>input {
  display: none
}

.tabsy>input:checked+label+.tab {
  display: block
}

.tabsy>input:checked+label+.tab>.content {
  -webkit-animation: showTab 250ms ease-in-out;
  animation: showTab 250ms ease-in-out
}

.tabsy>.tab {
  background: #fff;
  display: none
}

@media screen and (min-width: 768px) {
  .tabsy {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
  .tabsy>.tabButton {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    cursor: pointer
  }
  .tabsy>input:checked+label {
    background: #fff;
    color: #5a5243
  }
  .tabsy>.tab {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2
  }
}