JSFiddle - React, Tailwind, and code Playground

Pricing columns

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="parent-container">
  <div class="col-md-3 column-holder">
    <div class="square-Demo" style="background-color: #ed9119;">
      <h2>
          <strong>Demo</strong>
        </h2>
      <p>Try us for free and test our powerful features</p>
      <br>
      <h1>
          <strong>Free!</strong>
        </h1>
      <br>
      <a class="btn btn-lg btn-Demo" href="#">Get Started Now</a>
    </div>
  </div>

  <div class="col-md-3 column-holder">
    <div class="square-Starter" style="background: #00abd2;">
      <h2>
          <strong>Starter</strong>
        </h2>
      <p>Get started and share apps with
        <br>
        <strong> up to 50 end users</strong>
      </p>
      <h1>
          <sup class="pricing-box-sign">£</sup>
          <strong> 8.33</strong>        
          <p>per end user/month</p>
        </h1>
      <a class="btn btn-lg btn-Starter" href="#">Get Started now</a>
    </div>
  </div>

  <div class="col-md-3 column-holder">
    <div class="square-Pro" style="background: #1bb188;">
      <h2>
          <strong>Pro</strong>
        </h2>
      <p>Perfect for growing companies-publish apps for
        <br>
        <strong> up to 250 end users</strong>
      </p>
      <h1>
          <sup class="pricing-box-sign">£</sup>
          <strong>3.50</strong>
          <p>per end user/month</p>
        </h1>
      <a href="/free-trial/" class="btn btn-lg btn-Pro">Get Started now</a>
    </div>
  </div>


  <div class="col-md-3 column-holder">
    <div class="square-Enterprise" style="background: #f1574c;">
      <h2>
          <strong>Enterprise</strong>
        </h2>
      <p>Ideal for an organization that requires apps for
        <br>
        <strong> over 250 end users</strong>
      </p>
      <h1>
          <strong>Custom</strong>
          <p>per end user/month</p>
        </h1>
      <a href="/free-trial/" class="btn btn-lg...

CSS

.parent-container {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}

.column-holder,
.column-holder-2 {
  position: relative;
  text-align: center;
  border-radius: 5px;
}

.square-Demo,
.square-Starter,
.square-Pro,
.square-Enterprise {
  width: auto;
  padding: 20px;
  margin: 0;
  border-radius: 5px;
  position: relative;
  height: 100%;
}