JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="pagewraper">
  <header>
    <ul class="menu">
      <li><a href="#tabs-1">baisc information</a></li>
      <li><a href="#tabs-2">Address</a></li>
      <li><a href="#tabs-3">project</a></li>
      <li><a href="#tabs-4">prize</a></li>
      <li><a href="#tabs-5">Idea</a></li>
    </ul>
  </header>


    <div id="tabs-1">
      <p>Tab one content</p>
    </div>
    <div id="tabs-2">
      <p>Tab two content</p>
    </div>
    <div id="tabs-3">
      <p>Tab three content</p>
    </div>
    <div id="tabs-4">
      <p>Tab four content</p>
    </div>
    <div id="tabs-5">
      <p>Tab five content</p>
    </div>
  </div>

CSS

ul.menu{
    margin:0;
    padding:0;
}
ul.menu li{
   display: inline-block;
}
ul.menu li a{
   display: block;
    padding: 10px;
    background: #333;
    color: #fff;
}

JavaScript

$( "#pagewraper" ).tabs();