JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang=en>
<head>
<title>Inline-block content</title>
<meta charset=utf-8>
<link rel = "stylesheet" type = "text/css" href = "inline-block.css">
</head>
<body>
<div id="container">
<p> </p>
<p>inline content (default)</p>
<p>
<a href = "#">Page 1</a>
<a href = "#">Page 2</a>
<a href = "#">Page 3</a>
<a href = "#">Page 4</a>
<a href = "#">Page 5</a>
<a href = "#">Page 6</a>
<a href = "#">Page 7</a>
</p><p> </p>
<p class = "inline-block">inline-block content<br>
<a href = "#">Page 1</a>
<a href = "#">Page 2</a>
<a href = "#">Page 3</a>
<a href = "#">Page 4</a>
<a href = "#">Page 5</a>
<a href = "#">Page 6</a>
<a href = "#">Page 7</a>
</p><p> </p>
</div>
</body>
</html>
CSS
/* Set styles to equalise the browser rendition*/
html, body, h1, h2, h3, h4, h5, p, ol, ul, li { padding: 0; margin: 0;
}
body { font-size: 100%; font-weight: normal;
}
ul { padding-left: 0;}
/* end of style equalisation */
p { background:white margin:auto; text-align:center;
}
#container { margin:auto; text-align:center; width:97%; min-width:800px;
max-width:1200px;
}
a { background: orange; color:navy;
}
.inline-block a { display:inline-block; width:110px; height:30px;
line-height:30px; text-align:center;
}