JSFiddle - React, Tailwind, and code Playground

by Sunil Kashyap

HTML

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="money">
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="peep"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
                </div>
                <div class="modal-body">
    				<img  style="margin-left:-7.5px; margin-top:-10px;" src="http://drupalsn.com/files/projects/screenshots/sample.jpg" alt="offer">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.modal-content {
  width: 440px;
  margin-left: 40px;
  margin-top: -15px;
}

.modal-header {
  height: 5px;
}

.peep {
  margin-top: -6px;
}

@media screen and (max-width: 600px) {
  .money, .modal-backdrop {
      display: none !important;
    }
}

JavaScript

$(document).ready(function(){
    		if (typeof window.orientation === 'undefined') {
                 $("#myModal").modal('show');
            }
    	});