JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
    <div id="main" style="background-color: rgb(223, 223, 223);">    
      <a href="http://localhost:3000/sp/r/2">
        <div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
          <div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
          <canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
          <span class="box_link" style="font-size: 1em;" title="Facebook">
            Facebook
          </span>
        </div>
      </a>      
      
      <a href="http://localhost:3000/sp/r/2">
        <div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
          <div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
          <canvas...

CSS

#main {
	display: grid;
	grid-gap: 8px;
	justify-content: center;
	margin-top: 0.25rem;
}

.box,
.empty_box {
	background-color: rgba(255, 255, 255, 0.2);
	border: 1px solid #DDDDDD;
	border-radius: 12px 12px 12px 12px;
	display: -moz-box;
	//float: left;
	cursor: pointer;
}

.box_link {
	text-decoration: underline;
	font-size: 1em;
	color: #000000;
	margin: auto;
}

@media(max-width: 379px) {
	.box {
		font-size: 22px;
		width: 100%!important;
		padding: 10px 0px 90px 0px;
		display: grid;
		grid-gap: 4px;
		grid-template-areas: "i t";
		margin: 0px 2px 0px 2px;
	}
	.box_link {
		text-align: right;
		margin-right: 14px;
	}
	.box_inner {
		margin-left: 8px;
	}
}

@media screen and (min-width: 380px) {
	#main {
		grid-row-gap: 38px;
		grid-template-columns: repeat(3, 114px);
	}
	.box {
		display: grid;
		grid-gap: 4px;
		grid-template-areas: "i" "t";
		text-align: center;
		height: 114px!important;
		width: 114px!important;
		padding-top: 6px;
		padding-left: 6px;
	}
	.box_inner,
	.box_inner img {
		height: 100px!important;
		width: 100px!important;
	}
	.box:hover,
	.empty_box:hover {
		-webkit-box-shadow: 0px 0px 12px 3px #A1D6FF;
		-moz-box-shadow: 0px 0px 12px 3px #A1D6FF;
		box-shadow: 0px 0px 12px 3px #A1D6FF;
	}
}

@media screen and (min-width: 498px) {
	#main {
		grid-template-columns: repeat(4, 114px);
	}
}

@media screen and (min-width: 624px) {
	#main {
		grid-template-columns: repeat(5, 114px);
	}
}

@media screen and (min-width: 746px) {
	#main {
		grid-template-columns: repeat(6, 114px);
	}
}

@media screen and (min-width: 868px) {
	#main {
		grid-template-columns: repeat(7, 114px);
	}
}

@media screen and (min-width: 980px) {
	#main {
		grid-template-columns: repeat(8, 114px);
	}
}

@media screen and (min-width: 1280px) {
	#main {
		grid-column-gap: 12px;
	}
}

@media screen and (min-width: 1680px) {
	#main {
		grid-template-columns: repeat(8, 133px);
		grid-column-gap: 18px;
	}
	.box {
		height: 133px!important;
		width:...