JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Bootstrap 4 Navbar Sticky Top</title>
  
<!-- Bootstrap -->
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">

<!-- Datatable -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.0.0/css/fixedColumns.bootstrap4.min.css"> 
<link rel='stylesheet' href='https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css'> 


<style>

.bg-custom-2 {
  background-color: #fff;
  /*height:200px; */
  border-bottom: 20px solid #fff;
  margin-bottom: 0px !Important;
  padding-bottom: 60px !Important;
  padding-top: 60px !Important;
  border-bottom: 2px dotted #ddd;
}

table.dataTable {
    margin-top: 0px !Important;
    padding-top: 0px !Important;
}

th.sorting {
	margin-top:  0px !Important;
}

</style>




</head>
<body>
<!-- partial:index.partial.html -->
<nav class="navbar navbar-dark sticky-top bg-custom-2">
  <div class="container-fluid">
     	<div class="row">		 
			    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12" style="width:100%">              
					<div class="text-center">                                                                  
						<div class="text text-left">
							<span>TEST </span>
						</div>
						
						<select id="" data-show-content="true" class="form-control">
							<option selected >TEST1</option> 
							<option>TEST2</option> 
							<option>TEST3</option> 
						</select>	                                               
					 </div>
				</div>	 
				
			    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12" style="width:100%">              
					<div class="text-center">                                                                  
						<div class="text text-left">
							<span>TEST </span>
						</div>
						
						<select id=""...

JavaScript

var table;

window.addEventListener("resize", myFunction);

function myFunction() {
  table.draw();
}

$(document).ready(function() {

    table = $('#example').DataTable( {
		"dom": 't',
		
		fixedHeader: {
			headerOffset: 200
		},
		
		fixedColumns: true,
		scrollX: true,
		"lengthMenu": [ 100],
			
		"fnInitComplete": function(){
			$('.dataTables_scrollHead').css('overflow', 'auto');
			$('.dataTables_scrollHead').on('scroll', function () {
				$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
			});                    
		}, 		
    } ); 
});