JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
      <div class="icons">
        <div class="icons_item"><a class="icon" href="">1</a></div>
        <div class="icons_item"><a class="icon" href="">2</a></div>
        <div class="icons_item"><a class="icon" href="">3</a></div>
        <div class="icons_item"><a class="icon" href="">4</a></div>
        <div class="icons_item"><a class="icon" href="">5</a></div>
        <div class="icons_item"><a class="icon" href="">6</a></div>                     
      </div>
    </div>

CSS

.wrap{
	max-width: 320px;
	height: 560px;
	margin: 0 auto;
	overflow: hidden;
	background: cyan;
}

	.icons{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;	
		height: 100%;

	}

		.icons_item{
			width: 50%;
			height: 33%;
			background: yellow;
		}

			.icon{
				border: 2px solid #000;
				border-radius: 100%;
				width: 100%;
				display: block;

				text-align: center;
			}