JSFiddle - React, Tailwind, and code Playground

by santosonit

HTML

<html>

  <head>
    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
  </head>
  <div class="container-fluid px-5" id="container1">
    <div class="row d-flex flex-wrap align-items-center">
      <div class="col">
        <img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
      </div>
      <div id="unitSpot" style="display: none;">Fabric</div>
      <div class="col">
        <form id="headerForm">
          <div class="form-group row" style="display: flex; justify-content: flex-end">
            <label for="select" class="col-4 col-form-label">Order:</label>
            <div class="col-4">
              <select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
         ...

CSS

input[type='text'],
  .txtarea {
    margin-bottom: 3px;

  }

  .form-group input, select{
    height: 36px;
    padding-left: 03px;
    padding-right: 03px;
  }
  
  .form-group {
    margin-bottom: 2px !important;
}

  .padding-0 {
    padding-right: 0;
    padding-left: 0;
  }



  label {
    color: #292727;
    font-weight: bold;
    font-size: 13px;
    width: 140px;
    text-align: right;
  }

  label[for='notes'] {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    display: block;
  }

  .container-fluid {
    max-width: 99%;
  }