JSFiddle - React, Tailwind, and code Playground

4 perfect responsive squares with centered text

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid text-center">

  <div class="row">

<h2 class="lead text-info">
ANDREWS BOX OF DELIGHTS
</h2>
    <div class="foursquare pull-left">
      <span>SHOP</span>
      <span class="b2">TRADE</span>
      <span class="b3">NEWS</span>
      <span class="b4">EVENTS</span>
    </div>

 <div class="foursquare pull-left">
      <span>SHOP</span>
      <span class="b2">TRADE</span>
      <span class="b3">NEWS</span>
      <span class="b4">EVENTS</span>
    </div>

  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400|Domine:400|Montserrat:700);
 .foursquare span {
   font-family: Montserrat, sans-serif;
   width: 24%;
   min-width: 24vw;
   height: 24vw;
   margin: 0.1%;
   background: gold;
   display: block;
   float: left;
   text-align: center;
   line-height: 24vw;
 }
 
 .foursquare .b2 {
   background: #ed3cde
 }
 
 .foursquare .b3 {
   background: #726ecd;
   color: white
 }
 
 .foursquare .b4 {
   background: purple;
   color: white
 }
 
 .foursquare {
   width: 50%;
   min-width: 50vw;
   height: 50vw;
 }
 
 @media (min-width: 768px) {
   .foursquare span {
     font-size: 24px
   }
 }
 
 @media (max-width: 768px) {
   .foursquare span {
     font-size: 14px
   }
 }
 
 @media (max-width: 468px) {
   .foursquare span {
     font-size: 8px
   }
 }
 
 @media (max-width: 168px) {
   .foursquare span {
     font-size: 4px
   }
 }
 
 .row {
   background: #333
 }

JavaScript

/* http://bit.ly/ARP71 */
 	(function(i, s, o, g, r, a, m) {
 	  i['GoogleAnalyticsObject'] = r;
 	  i[r] = i[r] || function() {
 	    (i[r].q = i[r].q || []).push(arguments)
 	  }, i[r].l = 1 * new Date();
 	  a = s.createElement(o),
 	    m = s.getElementsByTagName(o)[0];
 	  a.async = 1;
 	  a.src = g;
 	  m.parentNode.insertBefore(a, m)
 	})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

 	ga('create', 'UA-4809804-1', 'auto');
 	ga('send', 'pageview');