JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div class="b-layout">
  <div class="b-form">
    <div class="b-form-item">
      <div class="b-form-item-label">
        Доставка
        <span class="b-form-item-status">
          <i class="fa fa-check fa-fw"></i>
        </span>
      </div>
      <ul class="b-form-select js-form-delivery-type">
        <li class="b-form-select-item">
          <div class="b-form-select-item-icon">
            <i class="fa fa-sort fa-fw js-form-select-item-icon"></i>
          </div>
          <div class="b-form-select-item-wrap">
            <div class="b-form-select-item-header">
              <div class="b-form-select-item-label">Курьером — бесплатно!</div>
              <div class="b-form-select-item-option">
                <div class="b-form-select-item-option-current js-form-select-item-option-current">завтра, 30 сентября</div>     
                <ul class="b-form-select-item-option-items js-form-select-item-option-items">
                  <li class="b-form-select-item-option-item">завтра, 30 сентября</li>
                  <li class="b-form-select-item-option-item">1 октября</li>
                  <li class="b-form-select-item-option-item">2 октября</li>
                  <li class="b-form-select-item-option-item">3 октября</li>
                  <li class="b-form-select-item-option-item">4 октября</li>
                </ul>
              </div>
            </div>
            <div class="b-form-select-item-comment">Удобная примерка! Вы ничего не платите, если решите не покупать!</div>
          </div>
        </li>
        <li class="b-form-select-item">
          <div class="b-form-select-item-icon">
            <i class="fa fa-sort fa-fw js-form-select-item-icon"></i>
          </div>
          <div class="b-form-select-item-wrap">
            <div class="b-form-select-item-header">
              <div class="b-form-select-item-label">Пункты самовывоза</div>
...

SCSS

body {
  background: #DEDEDE;
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
}

.b-layout {
  padding: 20px;
}

.b-form {
  margin: 0 auto;
  width: 700px;
  background: #FDFCFC;
}

.b-form-item {
  border: solid 1px #2BBBE6;
  color: #00ABE6;
}

.b-form-item:hover {
  border-color: #EAEAE9;
}

.b-form-item-label {
  position: relative;
  display: inline-block;
  width: 25%;
  padding: 15px;
  vertical-align: top;
  font-size: 18px;
  color: #333;
}

.b-form-item-status {
  position: absolute;
  right: 0;
}

.b-form-select {
  margin-top: -1px;
  display: inline-block;
  width: 64%;
  vertical-align: top;
}

.b-form-select-item {
  display: flex;
  padding: 15px;
  border: solid 1px transparent;
}

.b-form-select-item:hover {
  background: #FFF;
  border-color: #E6E6E6;
}

.b-form-select-item-icon {
  margin-right: 5px;
  color: #B9CCD5;
}

.b-form-select-item-header {
  font-size: 18px;
}

.b-form-select-item-label {
  display: inline-block;
}

.b-form-select-item-option {
  position: relative;
  display: inline-block;
  border-bottom: dashed 1px #00ABE6;
}

.b-form-select-item-option-items {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: #FFF;
  border-color: #E6E6E6;
}

.b-form-select-item-comment {
  font-size: 14px;
  color: #808080;
}

JavaScript

$('.js-form-select-item-option-current').on('click', function(){
	$this = $(this);
  $this.next('.js-form-select-item-option-items').show();
});