JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://rvcmembers.com/Emmanuel_test/booking-form/css/styles.css">
<form method="get" id="buyvipform" name="buyvipform" class="booking" target="_blank" >
<div class="items">
	  <div class="item">Resort <select name="zomlink" id="zomlink"  class="clickable" style="-webkit-border-radius: 0; border-radius: 0;" onchange="changeAction(this)">
      	
		<option value="0"  selected disabled>Select a Resort</option>
			           <optgroup label="RESORTS IN MEXICO">
			             <option value="106541">Club Regina Puerto Vallarta</option>
			             <option value="106539">Club Regina Los Cabos</option>
			             <option value="106537">Club Regina Cancun</option>
			             <option  value="106606">Villa Vera Puerto Vallarta</option>
			             </optgroup>
        
			           <optgroup label="RESORTS IN THE UNITED STATES">
			             <option value="106615">Sandcastle at Birch Bay</option>
			             <option value="106617">Teton Club</option>
			             <option value="106609">Kona Reef</option>
			             <option value="106604">Cimarron Golf Resort</option>
			             <option value="106610">The Miners Club</option>
			             <option value="106616">The River Club</option>
			             <option value="106535">WorldMark Phoenix</option>
			             <option value="106607" >Franz Klammer Lodge</option>
			             <option value="106612"...

SCSS

@mixin n-columns($min-width, $gutter, $last-equal: false, $max-cols: 7) {
  .items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -$gutter;
    margin-top: -$gutter;

    .item {
      flex: 1 0 $min-width;
      margin-left: $gutter;
      margin-top: $gutter;

      @if $last-equal {
        @for $i from 2 through $max-cols {
          $screen-width: ($min-width*$i)+($gutter*$i);
          $column-width: (100%/$i);
          @media (min-width: $screen-width) {
            max-width: calc(#{$column-width} - #{$gutter});
          }
        }
    
        $column-width: (100%/$max-cols);
        @media (min-width: $min-width*$max-cols) {
            min-width: calc(#{$column-width} - #{$gutter});
        }
      }
    }
  }
}

@include n-columns(200px,  10px, true, 7);

.items {
  .item {
    background: #e0ddd5;
    color: #171e42;
    box-sizing: border-box;
    padding: 10px;
  }
}

JavaScript

$(".checkIn").datepicker({
    format: "yyyy-mm-dd",
    todayBtn: true,
    autoclose: true,
    startDate: new Date()
  })
  .on("changeDate", function(e) {
    var checkInDate = e.date, $checkOut = $(".checkOut");    
    checkInDate.setDate(checkInDate.getDate() + 1);
    $checkOut.datepicker("setStartDate", checkInDate);
    $checkOut.datepicker("setDate", checkInDate).focus();
  });

$(".checkOut").datepicker({
  format: "yyyy-mm-dd",
  todayBtn: true,
  autoclose: true
});