JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<ul id="accordion">
<li>
     <label for="Item_1">Item</label>
<input type="radio" name="accordion" id="Item_1">
<div class="content">

<div class="gridwrapper"> <!-- whole form -->
<div class="gridwrapper"> <!-- 1st section -->
<div class=""> <!-- Is it junk? -->
<div class="gridcontainer"> <!-- The Items name -->
            <p>
            Item Name
            </p>
</div> <!-- The Items name -->
    
<div class="image"> <!-- The picture -->
     <img src="https://s-media-cache-ak0.pinimg.com/236x/36/7f/08/367f080e756d7997ef966953967efc04.jpg"
width="100%" height="100%">    
</div> <!-- The picture -->
<div class="itembox"> <!--1st column -->
<Table>
<tbody>
    <tr>
    <td>
      Market Value:
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
  <tr>
    <td>
      Quantity:
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
    <tr>
    <td>
      Weight
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
      <tr>
    <td>
      Durability
    </td>
    <td>
        <textarea rows="1" cols="10">???/???=100%
        </textarea>
    </td>
  </tr>
</tbody>
</Table>
</div> <!--1st column -->

<div class="itembox"> <!--2nd column -->
<Table>
<tbody>
    <tr>
    <td>
      Armor Chance:
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
  <tr>
    <td>
      Occupency:
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
    <tr>
    <td>
      Dmg.Type:
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
</tbody>
</Table>
</div> <!--2nd column -->
<div class="itembox"> <!--3rd column -->
<Table>
<tbody>
    <tr>
    <td>
      Item Type:
    </td>
    <td>
        <textarea rows="1" cols="10"> </textarea>
    </td>
  </tr>
  <tr>
    <td>
      Specific Type:
   ...

CSS

td {
    border: 1px solid black;
    font-size: .833em;
}

body {
    font-family: "Lucida Sans", Verdana, sans-serif;
}

.main img {
    width: 100%;
}

h1{
    font-size: .833em;
}

h2{
    font-size: 1.375em;
}

.header {
    padding: 1.0121457489878542510121457489879%;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
}

.menuitem {
    margin: 3%;
    margin-left: 0;
    margin-top: 0;
    padding: 3%;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
}

.main {
    padding: 3%;
}

.right {
    padding: 3%;
    
}

.footer {
    padding: 1.0121457489878542510121457489879%;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
    font-size: 0.625em;
}

.gridcontainer {
	width: 100%;
}

.gridwrapper {
	overflow: hidden;
    border: 1px solid;
    /*This borders the whole page*/
}

.gwrapper {
	overflow-y: auto;
    border: 1px solid;
    height: 100px;
    width: 100%;
    /*This borders the whole page*/
}

.gridbox {

    margin-right: 3%;
    float: left;
    border: 1px solid Black;
    background-color: #CDF0F6;
}

.image {

    margin-right: 3%;
    float: left;
    height: 217px;
    width: 217px;
    border: 1px solid Black;
    background-color: #CDF0F6;
    overflow: hidden;
    text-align:center;
}

.comments { width: 100%; height: 100% }

.itembox {

    margin-right: 3%;
    float: left;
    height: 217px;
    width: 217px;
    border: 1px solid Black;
    background-color: #CDF0F6;
    overflow: auto;
}

.gridheader {
    width: 100%;
}

.gridmenu {
    width: 30%;
}

.gridmain {
    width: 30%;
}

.gridright {
    width: 30%;
    margin-right: 0;
}

.quarter {
    width: 24.9999%;
    margin-right: 0;
    float: left
}

.gridfooter {
    width: 100%;
    margin-bottom: 0;
}

@media only screen and (max-width: 505px) {
  .gridmenu {
        width: 100%;
    }

    .quarter {
        width: 100%;
        margin-right: 0;
        float: left
    }
    .menuitem {
        margin: 3%;
       ...

JavaScript

///This fiddle allows me the stats to work
///http://jsfiddle.net/gjkskh5e/1/

//This lets you mirror textboxes
//https://jsfiddle.net/o7wuv9n4/

///#4dffb8 rgb(77, 255, 184) hsl(156, 100%, 65%)
//This function makes it so I can hide or show things from drop down boxes.
$(function() {
        $('#Nature').change(function(){
            $('.Nature').hide();
            $('#' + $(this).val()).show();
        });
    });


/// For this project http://jsfiddle.net/PhoenixOfBlades/91k9bzth/5/

///This code is about The Accordian i'm trying to put into the tabs.
/*https://jsfiddle.net/PhoenixOfBlades/6ho2jonk/ */

// This code is for the bars
function updateProgress(percent) {
    // change the text percentage
    jQuery('div#progress_bar .text_1, div#progress_bar .text_2').text(percent + '%');
    
    // Change the Bar
    jQuery('div#progress_bar .progress_right').css('width', percent + '%');
    
    // Only change the left bar when under 50 percent
    if(percent <= 33) {
        jQuery('div#progress_bar .text_2').css('z-index', 40);
        jQuery('div#progress_bar .progress_left').css('width', percent + '%');
    } else {
        jQuery('div#progress_bar .text_2').css('z-index', 150);
    }
}

var percent = 0;
setInterval(function() {
    updateProgress(percent);
    percent += 1;
    
    if(percent > 100) {
     percent = 0;   
    }
}, 50);

///This code is about tabs

// This function allows you to uncheck radio buttons using JQuery
(function ($) {

    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            $(this).mousedown(function () {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function () {
                if ($(this).data('wasChecked')) this.checked = false;
            });
        });

    };

})(jQuery);

$('input[type=radio]').uncheckableRadio();

///


/// This function allows tabs to close after being unchecked... kinda. It works better here 
///...