JSFiddle - React, Tailwind, and code Playground

by kalinin sergey

HTML

<div class="wrap">
      <div class="icons">                
        <div class="icons_item"><a class="icon" href="">hello, <br>world</a></div>          
        <div class="icons_item"><a class="icon" href="">hello, <br>world</a></div>          
        <div class="icons_item"><a class="icon" href="">hello, <br>world</a></div>          
        <div class="icons_item"><a class="icon" href="">hello, <br>world</a></div>          
        <div class="icons_item"><a class="icon" href="">hello, <br>world</a></div>          
        <div class="icons_item"><a class="icon" href="">hello, <br>world</a></div>          
      </div>
    </div>

CSS

body, html{
	margin: 0;
	padding: 0;
	height: 100%;
	background: #999;
}

.wrap{
	margin: 0 auto;
	overflow: hidden;
	height: 100%;
}

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

	}

		.icons_item:nth-child(8){background: blue;}
		.icons_item:nth-child(7){background: maroon;}
		.icons_item:nth-child(6){background: red;}
		.icons_item:nth-child(5){background: cyan;}
		.icons_item:nth-child(4){background: orange;}
		.icons_item:nth-child(3){background: lime;}
		.icons_item:nth-child(2){background: yellow;}
		.icons_item:nth-child(1){background: magenta;}

		.icons_item:nth-child(6),
		.icons_item:nth-child(1){
			width: 100%;
		}

		.icons_item{
			width: 50%;
			height: 25%;
			display: flex;
		}

		.icons_item_hide{
			display: none;
		}

			.icon{
				width: 150px;
				height: 50px;
				display: block;
				background: #fff;
				margin: auto;
			}

				.icon img{
					display: block;
					width: 66%;
					margin: 0 auto;
				}