JSFiddle - React, Tailwind, and code Playground

by jimmzzz

HTML

<div class="dropdown">
  <input type="text" class="search-input" placeholder="Search..." />
  <div class="options-list">
    <!-- Options -->
    <div class="option">Option 1</div>
    <div class="option">Option 2</div>
    <div class="option">Option 3</div>
    <div class="option">Option 4</div>
    <div class="option">Option 5</div>
    <!-- Add more options as needed -->
  </div>
  <button class="dropdown-button">Submit</button>
</div>

CSS

/* Basic styling for dropdown */
.dropdown {
  display: flex;
  flex-direction: column;
  width: 300px; /* Adjust as needed */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden; /* Ensure content doesn't overflow */
}

/* Search input styling */
.search-input {
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

/* Scrollable options list */
.options-list {
}

/* Individual option styling */
.option {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.option:last-child {
  border-bottom: none;
}

.option:hover {
  background-color: #f0f0f0;
}

/* Button styling */
.dropdown-button {
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  text-align: center;
}

.dropdown-button:hover {
  background-color: #0056b3;
}