JSFiddle - React, Tailwind, and code Playground

by Brynner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">

  <!-- The component starts here-->
  <div class="component-search-panel">

    <div class="row mx-0 pt-1">
      <div class="px-1 col-xs-12 col-sm-12 com-md-12 col-lg-4">

        <div class="d-flex align-items-center small input-group-sm mb-1">
          <i class="fa fa-search fa-fw text-muted position-absolute pl-2"></i>
          <input type="text" class="form-control pl-4" placeholder="Search..." />
        </div>

      </div>

      <div class="px-0 col-xs-12 col-sm-12 col-md-12 col-lg-8">
        <div class="row mx-0">

          <div class="px-1 col-xs-12 col-sm">
            <div class="custom-control custom-switch col-form-label-sm mb-1">
              <input type="checkbox" checked="checked" class="custom-control-input" id="customSwitch1">
              <label class="custom-control-label " for="customSwitch1">Favorites</label>
            </div>
          </div>

          <div class="px-1 col-xs-12 col-sm-6 col-md">
            <div class="input-group input-group-sm mb-1">
              <input type="text" class="form-control" placeholder="Customer" />
            </div>
          </div>

          <div class="px-1 col-xs-12 col-sm-6 col-md">
            <div class="input-group input-group-sm mb-1">
              <input type="text" class="form-control" placeholder="District" />
            </div>
          </div>

          <div class="px-1 col-xs-12 col-sm-6 col-md">
            <div class="input-group input-group-sm mb-1">
              <input type="text"...

CSS

.component-search-panel {
  margin: 5px 0px;
  background-color: #ececec;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
}