JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">

            <div class="col-lg-10 col-lg-offset">
           
                <br>
                <br>
                <div class="container level-box">
                    <div class="row">

                       
                        <div class="level col-md-4">
                            <h4>Summary</h4>
                            {summary}


                            <a href="http://www.google.com">Download ToAM° Construct Map</a>
                        </div>
                        
                        <div class="level col-md-4 col-md-offset-1 shift-margin-level">
                            <h4>{title} Level 1: {level_1_title}</h4>
                            {level_1}

                            <a href="www.google.com">Download ToAM° Construct Map</a>
                        </div>
                       
                        <div class="level col-md-4 col-md-offset-1 shift-margin-level">
                            <h4>{title} Level 2: {level_2_title}</h4>
                            {level_2}

                            <a href="www.google.com">Download ToAM° Construct Map</a>
                        </div>
                    
                        <div class="level col-md-4 col-md-offset-1 shift-margin-level">
                            <h4>{title} Level 3: {level_3_title}</h4>
                           

                            <a href="www.google.com">Download ToAM° Construct Map</a>
                        </div>
                       
                        <div class="level col-md-4 col-md-offset-1 shift-margin-level">
                            <h4>{title} Level 4: {level_4_title}</h4>
                            {level_4}

                            <a href="www.google.com">Download ToAM° Construct...

CSS

.header-box {
  color: blue;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 6px;
  padding-left: 6px;
  border-radius: 6px; }

.header-box:hover {
  text-decoration: none; }

.map-display {
  width: 100%;
  border: lightblue solid 1px;
  border-radius: 4px;
  padding: 8px;
  margin-top: 10px; }

.size {
  font-size: 36px; }

/*# sourceMappingURL=global.css.map */
.header-box:hover {
  text-decoration: none; }

.level-box > .row {
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: scroll; }

.level-box > .row > .col-md-4 {
  display: inline-block;
  float: none; }

.level {
  background-color: blue;
  height: 60%;
  border-radius: 16px;
  width: 200px;
  overflow-x: initial;
  white-space: normal;
  color: white;
  display: inline-block; }

.shift-margin-level {
  margin-left: 5% !important; }

.vertical-center {
  display: inline-block;
  vertical-align: middle;
  float: none; }

.level-box::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

.level-box::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5; }

.level-box::-webkit-scrollbar-thumb {
  background-color: #000000; }

/*# sourceMappingURL=constructs.css.map */