JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<div class="container-fluid my-container">

    <div class="row my-rowOne justify-content-center justify-content-around">
      <div class="col-xl-3 bg-primary">Row 1 Col 3</div>
      <div class="col-xl-3 bg-info">Row 1 Col 3</div>
      <div class="col-xl-3 bg-success">Row 1 Col 3</div>
    </div>


    <div class="row my-rowTwo justify-content-center justify-content-around">
      <div class="col-xl-3 bg-warning align-self-start rCol4">Row 2 Col 3</div>
      <div class="col-xl-3 bg-danger">Row 2 Col 3</div>
      <div class="col-xl-3 bg-dark align-self-start">Row 2 Col 3</div>
    </div>





  </div>

CSS

.my-rowTwo{
  height:200px;
}


.col-xl-3{
  margin-top:10px;
}