JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="bp small">IN SMALL BREAKPOINT</div>
<div class="bp large">IN LARGE BREAKPOINT</div>
<div class="tab-container">
  <div class="tab">first</div>
  <div class="tab-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta unde adipisci error, ab maxime eligendi, quam saepe non. Voluptate repudiandae saepe quod nisi ut non, culpa magni possimus temporibus inventore!
  </div>
  <div class="tab active">second</div>
  <div class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis veritatis tempora quasi numquam velit ea neque iure vitae veniam, accusantium saepe harum eaque ipsa at, labore, enim odit facilis fugiat.</div>
  <div class="tab">third</div>
  <div class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis veritatis tempora quasi numquam velit ea neque iure vitae veniam, accusantium saepe harum eaque ipsa at, labore, enim odit facilis fugiat.</div>
  <div class="tab">fourth</div>
  <div class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis veritatis tempora quasi numquam velit ea neque iure vitae veniam, accusantium saepe harum eaque ipsa at, labore, enim odit facilis fugiat.</div>

</div>

CSS

.tab-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tab {
  background: #23262a;
  color: white;
  padding: 0.4em 0.8em;
  flex: 0 1 auto;
  width: 100%;
}

.tab-content {
  width: 100%;
  display: none;
}

.tab.active+.tab-content {
  display: block;
}

.bp.large {
  display: none;
}

@media (min-width: 700px) {
  .bp.large {
    display: block;
  }
  .bp.small {
    display: none;
  }
  .tab {
    width: auto;
  }
  .tab-content {
    order: 1;
  }
}