JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<section>
    <input type="button" value="B000" />
    <span id="List">
        <a href="/Article/Details/61/8" class="Box">8</a><a href="/Article/Details/61/7" class="Box">7</a><a href="/Article/Details/61/6" class="Box">6</a><a href="/Article/Details/61/5" class="Box">5</a><a href="/Article/Details/61/4" class="Box">4</a><a href="/Article/Details/61/3" class="Box">3</a><a href="/Article/Details/61/2" class="Box selected">2</a><a href="/Article/Details/61/1" class="Box">1</a>
    </span>
    <input type="button" value="B001" />
</section>
<br /><br /><br />
<section><div>
    <input type="button" value="B000" />
    <span id="List">
        <a href="/Article/Details/61/8" class="Box">8</a><a href="/Article/Details/61/7" class="Box">7</a><a href="/Article/Details/61/6" class="Box">6</a><a href="/Article/Details/61/5" class="Box">5</a><a href="/Article/Details/61/4" class="Box">4</a><a href="/Article/Details/61/3" class="Box">3</a><a href="/Article/Details/61/2" class="Box selected">2</a><a href="/Article/Details/61/1" class="Box">1</a>
    </span>
    <input type="button" value="B001" /><div style="clear:both;"></div>
    </div></section>
<br /><br /><br />
<section>
    <input type="button" value="B000" />
    <span id="List">
        <a href="/Article/Details/61/8" class="Box">8</a><a href="/Article/Details/61/7" class="Box">7</a><a href="/Article/Details/61/6" class="Box">6</a><a href="/Article/Details/61/5" class="Box">5</a><a href="/Article/Details/61/4" class="Box">4</a><a href="/Article/Details/61/3" class="Box">3</a><a href="/Article/Details/61/2" class="Box selected">2</a><a href="/Article/Details/61/1" class="Box">1</a>
    </span>
    <input type="button" value="B001" />
</section>

CSS

section {
    text-align: center;
}
#List {
    width: 50px;
    overflow: hidden;
}
.Box {
    background: #EFEFEF;
    color: #9E9E9E;
    padding: 0 1px;
    margin: 0 1px;
}
section:nth-of-type(1) #List{
    display: inline;
}
section:nth-of-type(3) #List{
    display: inline-block;
}
section:nth-of-type(2) #List,section:nth-of-type(2) input{
    float:left;
}
section:nth-of-type(2) > div
{
    text-align:center;
}
a {
    text-decoration: none;
}