JSFiddle - React, Tailwind, and code Playground

nth-child

by Bianca Kuehweidner

HTML

<div id="container">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>

  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>

  <a href="#">11</a>
  <a href="#">12</a>
  <a href="#">13</a>
  <a href="#">14</a>
  <a href="#">15</a>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  line-height: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  width: 310px;
  margin: 10px;
  padding: 0;
  background-color: lime;
}

a {
  text-decoration: none;
}

#container a { 
  float: left;
  width: 48px;
  height: 20px;
  border: solid 1px #000; 
  margin: 0 10px 10px 0; 
  text-align: center;
}

#container a:nth-child(5n+5) { 
  margin: 0 0 10px 0; 
}