JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<link rel="stylesheet" href="https://partnerportal.bz/content/css/style.css">
<div class="modal" data-modal-id="10626" role="dialog">
		<div class="dialog-wrap">
			<div class="dialog">
				<header class="dialog-header">
					<strong class="dialog-title">Product Grid</strong><span><button class="button btn-inverse btn-link small" data-click="modal" name="remove"><span>X</span></button></span>
				</header>
				<main class="dialog-main">
					<div class="gridview">
						<header class="">
							
              <div class="search-one">
                <span><input placeholder="Part Number" /></span>
                <span><input  placeholder="Product Description" /></span>
                <span style="height:20px" class="radio-list background-light-gray">
                  <label class="radio"><input name="filter" type="radio" value="start"> Starts with</label>
                  <label class="radio"><input checked name="filter" type="radio" value="contains"> Contains</label>
                  <label class="radio"><input name="filter" type="radio" value="end"> Ends with</label>
                </span>
                <span>
                  <button class="button btn-secondary">Search</button>
                  <button class="button">Reset</button>
                </span>
              </div>
              
              <div class="search-two">
                <span class="input">
                  <select>
                    <option>All</option>
                    <option>Part Number</option>
                    <option>Product Description</option>
                  </select>
                  <input placeholder="" />
                </span>
                <span>
                  <button class="button btn-secondary">Search</button>
                  <button class="button">Reset</button>
                </span>
              </div>
              
              <div class="search-three">
                <span class="input">
                  <input placeholder=""...

CSS

.search-one {}
.search-one span {
  display: inline-block;
  vertical-align: middle;
}

.search-two {
  margin: 1rem 0;
}
.search-two select {
  border: none;
  width: 50px;
  background: #eee;
}

.search-three {
  margin: 1rem 0;
  position: relative;
}
.search-two select {
  border: none;
  width: 50px;
  background: #eee;
}
.dropdown-search {
  border: 1px solid #ccc;
  margin-top: 5px;
  width: 50%;
  position: absolute;
  top: 35px;
  left: 0;
  z-index: 2;
  background: #fff;
}
.dropdown-search span {
  display: block;
  margin: 5px;
}