JSFiddle - React, Tailwind, and code Playground

by murgiaMarco

HTML

<html>
<head>
<!--  jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>


</head>
<body>
<div class="bootstrap-iso">
    <div class="container-fluid">
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">

    <!-- Form code begins -->
    <form method="post">
        <div class="form-group"> <!-- Date input 1-->
            <label class="control-label" for="date">Start Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
        </div>
        <div class="form-group"> <!-- Date input 2-->
            <label class="control-label" for="date">End Date</label>
            <input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/>
        </div>
        <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " name="submit" type="submit">Submit</button>
        </div>
    </form>
    <div class="calendarComponent">
    
    </div>
 <!-- Form code ends --> 
    </div>
    </div>    
    </div>
    <script>
        $(document).ready(function(){
            var date_input=$('input[name="date"]'); //our date input has the name "date"
            var date_input1=$('input[name="date1"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.calendarComponent') : "body";
            var options={
                format: 'mm/dd/yyyy',
                container:...

SCSS

.calendarComponent { 
  display: block;
    
    bottom: 260px;
    width: 100%;
    
    .datepicker {
      top: 200px !important;
    }
}


.isp-main-datepicker {
  width:400px; // could be anything
}
.ngb-dp-month.d-block.ml-3 {
  width:100%;
}
.ngb-dp-weekday {
  width:14.28%;
}
.ngb-dp-day{
  width:14.28%;
}