JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- Modal -->
    <div class="modal fade" id="warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header modal-header-warning">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> <span class="text-center">Alert on Fake Websites similar to the website of Govt. of Punjab</span></h4>
                    <h4 class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> <span class="text-center">ਪੰਜਾਬ ਸਰਕਾਰ ਦੀ ਵੈੱਬਸਾਈਟ ਨਾਲ ਮੇਲ ਖਾਂਦੀਆਂ ਜਾਅਲੀ ਵੈੱਬਸਾਈਟਾਂ ਬਾਰੇ ਚੇਤਾਵਨੀ</span></h4>
                </div>
                <div class="modal-body text-justify">
                    <p class="lead text-success text-center"><strong>The official website of the Government of Punjab is <span class="bg-success">https://punjab.gov.in</span>.</strong></p>
                    <p>It has been noticed that many fraudulent websites like <span class="text-danger"><strong class="bg-danger">www.punjab-govt.in</strong>, <strong class="bg-danger">www.punjab-gov.in</strong>, <strong class="bg-danger">www.punjabgovt.in</strong>, <strong class="bg-danger">www.punjabgov.co.in</strong></span> and many other similar looking websites are attempting to collect data and fraudulently collect payments from citizens.</p>
                    <p>It is therefore advised to all citizens to ensure that they are visiting the legitimate State Portal of the Govt. of Punjab and they should NOT visit the above...

CSS

.modal-header-warning {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #f0ad4e;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

JavaScript

$('#warning').modal('show')