JSFiddle - React, Tailwind, and code Playground

by Earthlings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select" data-state="">
	<div class="select-title">Выберите тариф</div>
	<div class="select-content">
		<input class="select-input" type="radio" name="singleSelect" />
		<label class="select-label">Optima</label>
		<input class="select-input" type="radio" name="singleSelect"/>
		<label class="select-label">Business</label>
	</div>
</div>

<div class="select" data-state="">
	<div class="select-title">Выберите срок</div>
	<div class="select-content">
		<input class="select-input" type="radio" name="singleSelect" />
		<label class="select-label">3 месяца</label>
		<input class="select-input" type="radio" name="singleSelect"/>
		<label class="select-label">6 месяцев</label>
	</div>
</div>

SCSS

.select {
  position: relative;
  width: 30%;
  display: inline-block;
  margin-right: 50px;

  &[data-state="active"] {
    .select-title {
      &::before {
        transform: translate(-3px, -50%) rotate(-45deg);
      }

      &::after {
        transform: translate(3px, -50%) rotate(45deg);
      }
    }
    
    .select-content {
      opacity: 1;
    }
    
    .select-label + .select-input + .select-label {
      max-height: 40px;
      border-top-width: 1px;
    }
  }
}
.select-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 8px 16px;

  border-radius: 5px;
  border: solid 1px #c7ccd1;
  
  cursor: pointer;

  &::before,
  &::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 16px;

    display: block;
    width: 10px;
    height: 2px;

    transition: all 0.3s ease-out;

    background-color: #333333;

    transform: translate(-3px, -50%) rotate(45deg);
  }
  &::after {
    transform: translate(3px, -50%) rotate(-45deg);
  }

  &:hover {
    border-color: #D8093A;

    &::before,
    &::after {
      background-color: #D8093A;
    }
  }
}
.select-content {
  position: absolute;
  top: 40px;
  left: 3px;

  display: flex;
  flex-direction: column;
  width: calc(100% - 6px);

  background-color: #ffffff;

  border: 1px solid #c7ccd1;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  
  transition: all 0.3s ease-out;

  opacity: 0;
  z-index: 8;
}
.select-input {
  display: none;

  &:checked + label {
    background-color: #dedede;
  }
  &:disabled + label {
    opacity: 0.6;
    pointer-events: none;
  }
}
.select-label {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin: 8px 0;
  
  transition: all 0.2s ease-out;

  cursor: pointer;
  
  overflow: hidden;

  & + input + & {
    border-top: 0 solid #C7CCD160;
  }

  &:hover {
    background-color: #D8093A !important;

    color: #ffffff;
  }
}

JavaScript

const selectSingle = $('.select');
const selectSingle_title = $('.select-title');
const selectSingle_labels = $('.select-label');

$(selectSingle).click(function() {
	if ($(this).attr('data-state') === 'active') {
		$(this).attr('data-state', '');
	} else {
		$(this).attr('data-state', 'active');
	}
});

selectSingle_labels.click(function(e) {
  $(this).parent().prev().text($(e.target).text());
});