JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<form action="">


  <div class="contract-selector">
    <div class="contract-selected">
      <div class="contract-selected__id">
        <input type="text" placeholder="PICK CONTRACT PLZ" id="contractNum">
        <label id="text-input-label" aria-hidden="true">Input Label</label>
      </div>
      <img class="contract-selected__img" src="https://picsum.photos/55/55" alt="">
    </div>

    <div class="contract-select">
      <div class="contract-select__title">
        YOUR CONTRACTS
      </div>


      <a href="#" class="contract-select__item">2238473423
        <img class="contract-select__img" src="https://picsum.photos/55/55" alt="">
      </a>
      <a href="#" class="contract-select__item">2238473423
        <img class="contract-select__img" src="https://picsum.photos/55/55" alt="">
      </a>
      <a href="#" class="contract-select__item">2238473423
        <img class="contract-select__img" src="https://picsum.photos/55/55" alt="">
      </a>
      <a href="#" class="contract-select__item">2238473423
        <img class="contract-select__img" src="https://picsum.photos/55/55" alt="">
      </a>
      <a href="#" class="contract-select__item">2238473423
        <img class="contract-select__img" src="https://picsum.photos/55/55" alt="">
      </a>
      <a href="#" class="contract-select__item">2238473423
        <img class="contract-select__img" src="https://picsum.photos/55/55" alt="">
      </a>

    </div>
  </div>




</form>

SCSS

.contract-selector {
  position: relative;
}

.contract-selected {

  &__id {
    display: flex;
    flex-direction: column;
  }

  label {
    display: block;
    font-weight: 600;
    line-height: 1.4em;
    order: 1;
    padding-bottom: 0.25em;
    position: relative;
  }

  input[type="text"] {
    border: 1px solid #A8A7A7;
    background: #fff;
    -webkit-appearance: none;
    box-sizing: border-box;
    border-radius: 5px;
    color: var(--grey80);
    font-size: 16px;
    order: 2;
    padding: 1.047em;
    padding-right: 60px;
    min-height: 3.4375em;
    width: 100%;
  }

  &__img {
    border-radius: 0 5px 5px 0;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}


.contract-select {
  display: none;
  border: 1px solid #A8A7A7;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
  border-radius: 0 0 5px 5px;
  overflow: auto;
  position: absolute;
  max-height: 300px;
  top: 100%;
  left: 0;
  width: 100%;



  &__title {
    background: #F3F3F3;
    font-size: 12px;
    padding: 5px;
  }

  &__item {
    border-bottom: 1px solid #F3F3F3;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 1.047em;
    padding-right: 60px;
    min-height: 3.4375em;
    width: 100%;
  }

  &__img {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  input[type="radio"]:focus+label {
    border: 2px solid #0072ba;
  }
}

.active {
  .contract-select {
    display: block;
  }
}



form {
  width: 300px;
  padding: 2rem;
}

body {
  font-family: sans-serif;
}

JavaScript

const contracts = document.querySelector('.contract-selector'),
  contractInput = document.getElementById('contractNum');

contractInput.addEventListener('focus', function() {
  contracts.classList.add('active');
});

contractInput.addEventListener('blur', function() {

  // loop contract-select__item 's and see if they have focus. 
  // If so, chill out. Otherwise, remove active: 

  contracts.classList.remove('active');
});

// Add event listener on each contract-select__item
// on click, populate the input & image, and then remove the active class