JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="container">

			<h2>Your application is...</h2>

			<div class="row" style="/*! text-align: center; */">

				<div class="three columns">

					<p>
            <strong>
						  Clustered
            </strong>
					</p>

					<p>
						<i class="fas fa-expand-arrows-alt" style="font-size: 50px;"></i>						
					</p>

					<p>
						Spread out on several different servers.
					</p>

				</div>

				<div class="three columns">

					<p>
            <strong>
						  SandBoxed
            </strong>
					</p>

					<p>
						<i class="fas fa-lock" style="font-size: 50px;"></i>
					</p>

					<p>
						Secured in your own little world
					</p>

				</div>

				<div class="three columns">

					<p>
            <strong>
						  Protected
            </strong>
					</p>

					<p>
						<i class="fas fa-shield-alt" style="font-size: 50px;"></i>
					</p>

					<p>
						Protected against <span title="IPs that have been know to attack websites.">bad IP</span>
					</p>

				</div>

			</div>
			
		</div>

CSS

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


html, body {
  color: #454545;
}

.three.columns {
  border: 1px solid #CCCCCC;
}

.three.columns p {
  text-align: center;
}