JSFiddle - React, Tailwind, and code Playground

HTML

<title>TITLE.</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<body>
		<div class="wrapper">
				<!--		TABS		 -->
			<div class="tabs">
			    <ul class="tab-links">
			        <li><a href="#tab1">Tab1 very very long long text</a></li>
			        <li class="active"><a href="#tab2">Tab2 very very long long text</a></li>
			    </ul>
			 
			    <div class="tab-content">
			        <div id="tab1" class="tab">
						<p>Tab 1 content</p>
			        </div>
			 
			        <div id="tab2"  class="tab active">
			        	<div>
			        		<span class="collapsed">
			        			<p>Main line 1. <a href="javascript:void(0)" class="collapse">More</a></p>
			        		</span>
			        		<span class="expanded">
			        			<p>Main line 1.	<a href="javascript:void(0)" class="expand">Less</a></p>
			        			<div class="box">
					        		Expanded text.
				        		</div>
				        		</br>
			        		</span>
			        	</div>
			        	<div>
			        		<span class="collapsed">
			        			<p>Main line 2.	<a href="javascript:void(0)" class="expand">More</a></p>
			        		</span>
			        		<span class="expanded">
			        			<p>Main line 2. <a href="javascript:void(0)" class="collapse">Less</a></p>
			        			<div class="box">
                                    Some more text here.
				    	    	</div>
				    	    	</br>
			        		</span>
			        	</div>
			        </div>
			    </div>
			</div>
		</div>
		
	</body>

CSS

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 30%;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#222;
            font-size:16px;
            font-weight:600;
            color:#fff;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#333;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#222;
        color:#aaffaa;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:10px;
        background: #ffffff;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }
/*------ Tabs end ------*/

.box {
    padding:1em 2em 1em;
    background: #aaa;
}

body {
    font-color: #000000
}

JavaScript

// TABS JS CODE
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
});
		// COLLAPSE JS CODE
var highlight = false
$(document).ready(function() {
	$(".expanded").hide();
	$(".expand, .collapse").click(function() {
		$(this).parent().parent().parent().children(".expanded, .collapsed").toggle();
	});
});