JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

CSS

.circle-container {
  width: 24em; height: 24em;
  border-radius: 50%;
  border:2px solid red;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.circle-container a {
    display: block;
    border:2px solid grey;
    background:white;
    border-radius:50%;
    text-align:center;
}

.deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */
.deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */
.deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */
.deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */
.deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */
.deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */
.deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */


/*bring the lateral circles closer to the center*/
.deg2, .deg5{margin:0 -1em 0 1em;}
.deg3, .deg6{margin: 0 1em 0 -1em}

body{
  background:steelblue;
}