JSFiddle - React, Tailwind, and code Playground

by Narek Tarverdyan

HTML

<div class="badge-container">
				  <a href="">
					    <div class="badge">
      						<img src="http://www.placehold.it/400x400/FF9999">
      						<h2>CumberlandCounty</h2>
					    </div>
  				</a>
				  <a href="">
    					<div class="badge">
						      <img src="http://www.placehold.it/400x400/99FF99">
						      <h2><strong>Dauphin</strong>County</h2>
    					</div>
  				</a>
				  <a href="">
    					<div class="badge">
						      <img src="http://www.placehold.it/400x400/9999FF">
      						<h2><strong>Lancaster</strong>County</h2>
					    </div>
				   </a>
				  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9F9F99">
      <h2><strong>Lebanon</strong>County</h2>
    </div>
  				</a>
  				<a href="">
					    <div class="badge">
						      <img src="http://www.placehold.it/400x400">
      						<h2><strong>York</strong>County</h2>
					    </div>
  				</a>
			</div>

SCSS

.badge-container {display:flex; flex-direction:row; 
  .badge {position:relative;}
  h2 {position:absolute;
      top:50%;
      left:50%; 
      transform: translateX(-50%) translateY(-50%);
    margin: 0;
      text-align:center;
      strong {display:block;}
  }
}

img {max-width:100%;}