<div class="container-fluid">

​

  <div id="theTabPanel" dir="rtl">

    <div>

      <a>Africa</a>

      <div>

        <ul>

          <li>Algeria</li>

          <li>Angola</li>

          <li>Benin</li>

          <li>Botswana</li>

        </ul>

      </div>

    </div>

    <div>

      <a class="wj-state-active">

        America

      </a>

      <div>

        <ul>

          <li>Canada</li>

          <li>Chile</li>

          <li>Mexico</li>

          <li>United States</li>

        </ul>

      </div>

    </div>

    <div>

      <a>Asia</a>

      <div>

        <ul>

          <li>China</li>

          <li>Korea</li>

          <li>India</li>

          <li>Japan</li>

        </ul>

      </div>

    </div>

    <div>

      <a>Europe</a>

      <div>

        <ul>

          <li>Austria</li>

          <li>England</li>

          <li>France</li>

          <li>Germany</li>

          <li>Netherlands</li>

          <li>Switzerland</li>

        </ul>

      </div>

    </div>

    <div>

      <a>Oceania</a>

      <div>

        <ul>

          <li>Australia</li>

          <li>Fiji</li>

          <li>New Zealand</li>

          <li>Samoa</li>

        </ul>

      </div>

    </div>

  </div>

​

</div>

@font-face {

  font-family: 'S-CoreDream-3Light';

  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');

  font-weight: normal;

  font-style: normal;

}

​

body {

  margin: 20px;

  font-family: 'S-CoreDream-3Light';

}

​

.container-fluid{

  border:1px solid #ededed;

  padding:10px;

  border-radius:10px;

}

​

.wj-tabpane {

  padding: 12px;

}

​