JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div >
    <ul class="resource-category">
      <li><a href="#test-0">Green Family Newsletters</a></li>
      <li><a href="#test-1">Green Lesson Plans</a></li>
      <li><a href="#test-2">Quarterly E-Newsletter</a></li>
      <li><a href="#test-3">Resource Support  Package</a></li>
      <li><a href="#test-4">Student Activities</a></li>
      <li><a href="#test-5">onTRAC Calendar</a></li>
      <li><a href="#test-6">onTRAC Family Newsletters</a></li>
    </ul>


<div class="categories">
  <div class="resource" id="test-0">
    <h2>Green Family Newsletters</h2>
    <table class="resource-header"><tbody><th>Title / Description</th><th>Date Uploaded</th><th>File Type / Download</th></tbody></table>
    <ul class="accordian">
      <li>
        <h3>Green Elementary</h3>
        <table class="resource-detail"><tbody>
          <tr>
            <td class="descr">
              <h4>Green Family Newsletter - Elementary</h4>
              <p>Parent &amp; family newsletter;  kick off your student planner program in August with this communication.</p>
            </td>
            <td class="image"><a href="http://dev-wdf.schoolspecialty.com/delegate/ssi-wdf-ucm-webContent/?dDocName=X119144"><img src=""/></a></td>
            <td class="date">2012-05-28 00:00</td>
            <td class="download"><p class="type">Type: PDF</p><p class="download"><a href="http://dev-wdf.schoolspecialty.com/delegate/ssi-wdf-ucm-webContent/?dDocName=X119144">Download</a></p></td>
          </tr>
        </tbody></table>
      </li>
      <li>
        <h3>Green Middle/High</h3>
        <table class="resource-detail"><tbody>
          <tr>
            <td class="descr">
              <h4>Green Family Newsletter -Middle/High</h4>
              <p>Parent &amp; family newsletter;  kick off your student planner program in August with this communication.</p>
            </td>
            <td class="image"><a...

JavaScript

jQuery(".resource-category").tabs();