JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<script src="https://cdn.jsdelivr.net/uikit/2.26.3/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/uikit/2.26.3/css/uikit.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/uikit/2.26.3/css/uikit.almost-flat.min.css">
<div class="uk-container uk-container-center">
  <div class="uk-grid" data-uk-grid-margin>
  
    <div class="uk-width-1-4">
      <div class="uk-panel uk-panel-box">
        <ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
          <li class="uk-nav-header">Template Installation</li>
          <li class="uk-active"><a href="#requirements">Requirements</a></li>
          <li class=""><a href="#installation">Template Installation</a></li>
          <li class=""><a href="#quickstart">Quickstart Installation</a></li>
        </ul>
      </div>
    </div>
    <div class="uk-width-3-4">
      <div class="uk-panel uk-panel-box">
					<h1>Box Header</h1>
					<h2 id="requirements">Box Sub Header</h2>
		      <p>
          Hello sir. How are you doing today?
          </p>	
          <div class="uk-alert uk-alert-danger">If any of these requirements are missing you might need to contact   your webhost and ask them to install or enable the needed extensions.</div>

					</div>
    </div>
    </div>  
 </div>