JSFiddle - React, Tailwind, and code Playground

by ionko22

HTML

<div class="tabBox">
  <ul class="tabs">
    <li class="selected"><a href="#">tab 1</a></li>
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <li><a href="#">tab 3</a></li>
    <li><a href="#">tab 4</a></li>
    <li><a href="#">tab 5</a></li>
    <li><a href="#">tab 6</a></li>
        <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <li><a href="#">tab 3</a></li>
    <li><a href="#">tab 4</a></li>
    <li><a href="#">tab 5</a></li>
    <li><a href="#">tab 6</a></li>
        <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <li><a href="#">tab 3</a></li>
    <li><a href="#">tab 4</a></li>
    <li><a href="#">tab 5</a></li>
    <li><a href="#">tab 6</a></li>
        <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <li><a href="#">tab 3</a></li>
    <li><a href="#">tab 4</a></li>
    <li><a href="#">tab 5</a></li>
    <li><a href="#">tab 6</a></li>
    <ul class="tabButtons">
      <li> <a href="#" class="1"> &lt;-</a> </li>
      <li> <a href="#">-&gt; </a> </li>
      <li><input type='button' value="button" /></li>
    </ul>  
    </li>          
    </ul>  
</div>

CSS

.tabBox
{
	display:block;
	overflow:auto;
	max-width:800px;
    height:40px;
}

.tabs {
	display:block;
	float:left;
    max-width:800px;
    padding-right:60px;
}

.tabs li{
	display:block;
	float:left;
}
.tabs li:last-child{
 position:absolute;
    right:20px;
}