JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="tabs-accordion">
    <input type="radio" name="tabs" id="tab1" checked="checked">
    <label for="tab1">Option 1</label>
    <div class="tab tab1"></div>
		<input type="radio" name="tabs" id="tab2">
    <label for="tab2">Option 2</label>
    <div class="tab tab2"></div>
		<input type="radio" name="tabs" id="tab3">
    <label for="tab3">Option 3</label>
    <div class="tab tab3"></div>
</div>

CSS

body {
  background: #eee;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 10vh;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
}

* {
  margin: 0;
  padding: 0;
}

.tabs-accordion {
  display: flex;
  flex-wrap: wrap; // make sure it wraps
}

.tabs-accordion .tab p {
  font-size: 12px;
}

.tabs-accordion label {
  order: 1; // Put the labels first
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #E2E2E2;
  font-weight: bold;
  transition: background ease 0.2s;
}

.tabs-accordion .tab {
  order: 99; // Put the tabs last
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs-accordion input[type="radio"] {
  display: none;
}

.tabs-accordion input[type="radio"]:checked+label {
  background: #fff;
}

.tabs-accordion input[type="radio"]:checked+label+.tab {
  display: block;
}

@media (max-width: 768px) {
  .tabs-accordion .tab, .tabs-accordion label {
    order: initial;
  }
  .tabs-accordion label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

JavaScript

$(document).ready(function () {
	const SELECTOR = '[type=radio]';

	function loadData(tabId) {
  	$.ajax({
       url: `${tabId}.txt`,
       dataType: "text",
			 async: false,
       success: (data) => {
         $(`.${tabId}`).html(data);
       }
    });
  }

	const checkedTabId = $(`${SELECTOR}:checked`).prop('id');
  loadData(checkedTabId);
   
	$(SELECTOR).change(function () {
    if (this.checked) {
      loadData(this.id);
    }
	});
});