JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="intro" class="fl-row fl-row-full-width fl-row-bg-color fl-node-kl5cn7jwgh9q" data-node="kl5cn7jwgh9q"><div class="fl-drop-target fl-row-drop-target ui-sortable" style=""></div>
	<div class="fl-row-content-wrap">
						<div class="fl-row-content fl-row-fixed-width fl-node-content">
		
<div class="fl-col-group fl-node-ha7u98b2c4k0 fl-col-group-equal-height fl-col-group-align-top" data-node="ha7u98b2c4k0">
			<div class="fl-col fl-node-uxc2rknmh0di fl-col-small column" data-node="uxc2rknmh0di" style="width: 23.42%;">
	<div class="fl-col-content fl-node-content ui-sortable">
	<div id="the_mission" class="fl-module fl-module-rich-text fl-node-yb9upfxewvrc vertical_menu" data-node="yb9upfxewvrc" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor" onclick="myFunction()">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3>The Mission</h3>
</div>
	</div>
</div>
<div id="biz_models" class="fl-module fl-module-rich-text fl-node-cf81jtm6uz92 vertical_menu" data-node="cf81jtm6uz92" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3>Business Models</h3>
</div>
	</div>
</div>
<div id="services" class="fl-module fl-module-rich-text fl-node-ejryoctv4dk6 vertical_menu" data-node="ejryoctv4dk6" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3 class="fl-slide-title">Services</h3>
</div>
	</div>
</div>
<div id="the_chart" class="fl-module fl-module-rich-text fl-node-ef56haprn9vu vertical_menu" data-node="ef56haprn9vu" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3>A Financial Hedge for Liquid Asphalt</h3>
</div>
	</div>
</div>
<div id="the_story" class="fl-module fl-module-rich-text fl-node-c5mb604ajlpo...

CSS

.visibility {
  display: none;
  width: 75%;
  position: absolute;
  top: 0;
  left: 20%;
  }
.fl-col.fl-node-uxc2rknmh0di.fl-col-small.column {
    width: 20%;
}

JavaScript

function myFunction() {
  var x = document.getElementById("the_mission_copy");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}