JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">

  <div class="row">
    <div class="col-sm">
      <div class="panel_wrap">
            <div class="hd">1 of 1</div>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
            </p>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm">
      <div class="panel_wrap">
            <div class="hd">1 of 2</div>
                        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
            </p>
      </div>
    </div>
    <div class="col-sm">
      <div class="panel_wrap">
            <div class="hd">2 of 2</div>
                        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
            </p>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm">
      <div class="panel_wrap">
            <div class="hd">1 of 3</div>
                                    <p>
            Lorem ipsum dolor...

CSS

.container {
  margin-bottom: 40px;
  }
  
}.row {
  background: #f8f9fa;
  margin-top: 20px;
  border: solid 1px #dddddd;
  padding: 10px;
}

[class*="col-"] {
  padding: 10px;
}

[class*="col-"] .panel_wrap {
  border: solid 1px #6c757d;
  padding: 10px;
  padding-top: 0;
  background: #fff;
  min-height: 200px;
}

[class*="col-"] .panel_wrap .hd {
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  background: #eeefff;
  margin-top: 0px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
}

[class*="col-"] .panel_wrap p {
  padding: 10px;
}