JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 

    <section>
        <div class="modal" id="offersModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content"> 
                <div class="modal-banner"> 
                    <img src="" alt="" style="width:880px; height: 295px;">
                </div>
                <div class="modal-body">
                    <div style="display: flex; flex-direction: row;"> 
                    </div>
                    <div class="row">
                        <div class="col-md-6"> 
                        <div class="col-md-6">
                            <div style="border: 2px solid #17B8B9; min-height:300px;padding:20px; line-height:2.5em;margin-top:10px;">
                                <h4 style="color:#17B8B9;">Why do we use it?</h4>
                             
                                <p style="color: #006ac3;">Why do we use it?<img src="../images/icon-gear.png" style="width:25px;">  
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="" style="clear: left; background-color:rgba(236, 236, 236, 0.5); padding:20px 70px 10px 70px;">
                    <small>Not interested in this? <a ui-sref="availableoffers" data-dismiss="modal">See other available offers</a></small>
                </div>
                <div class="" style="background-color:rgba(236, 236, 236, 0.5); padding:10px 70px 40px 70px;">
                    <small>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap...

CSS

.modal {
        display: block;
        background-color: rgba(0,0,0,0.65);
    }
    div#mailBoxOffer:before {
        content: '';
        position: absolute;
        border-top: 1px solid rgba(0,0,0,0.6);
        border-left: 1px solid rgba(0,0,0,0.6);
        right: 40px;
        top: -11px;
        transform: rotate(45deg);
        z-index: -99;
        padding: 10px;
        background-color: white;
    }

    div#mailBoxOffer {
      position: absolute;width: 370px;
      height: 184px;
      min-height: 184px;
      display: none;
      z-index: 100000;
      background-color: white;
      padding: 23px;
      text-align: left;
      line-height: 1.5em;
      border: 1px solid rgba(0,0,0,0.6);
      /*box-shadow: 2px 3px 4px gray;*/
    }

    a.close {
      cursor: pointer;
    }

    a.brand {
      cursor: default;
    }
    
    .modal-dialog {
  width: 60%;
  height: 100%;
  margin: auto;
}
.modal-dialog .modal-content {
  border-radius: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  width: 100%;
  max-width: 100%;
  overflow: scroll;
}
.modal-dialog .modal-content .modal-header {
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 40px;
  padding-top: 20px;
  position: relative;
}
.modal-dialog .modal-content .modal-header .close {
  position: absolute;
  top: 5px;
  right: 30px;
  font-size: 42px;
  line-height: normal;
  color: #adadad;
}
.modal-dialog .modal-content .modal-header .printer {
  position: absolute;
  top: 0px;
  right: 70px;
  font-size: 42px;
  line-height: normal;
}
.modal-dialog .modal-content .modal-header .printer img {
  width: auto;
}
.modal-dialog .modal-content .modal-header .mail {
  position: absolute;
  top: 0px;
  right: 110px;
  font-size: 42px;
  line-height: normal;
}
.modal-dialog .modal-content .modal-header .mail img {
  width: 40px;
}
.modal-dialog .modal-content .modal-header .brand {
  position: absolute;
  top: 10px;
  left: 25px;
 ...