JSFiddle - React, Tailwind, and code Playground

by riyadh

HTML

<div class="scroll">
  <div id="a" data-value="a" class="active">Ahad</div>
  <div id="b" data-value="b">Senin</div>
  <div id="c" data-value="c">Selasa</div>
  <div id="d" data-value="d">Rabu</div>
  <div id="e" data-value="e">Kamis</div>
  <div id="f" data-value="f">Jumat</div>
  <div id="g" data-value="g">Sabtu</div>
</div>

<select>
    <option value="a">Ahad</option>
    <option value="b">Senin</option>
    <option value="c">Selasa</option>
    <option value="d">Rabu</option>
    <option value="e">Kamis</option>
    <option value="f">Jumat</option>
    <option value="g">Sabtu</option>
</select>

CSS

.scroll {
  height: 90px;
  overflow: scroll;
  background-color:gray;
  text-align:center;
}
.scroll div {
  font-size: 24px;
  color: #e8e8e8;
  transition:.3s ease-in-out;
}

.scroll div.active {
  font-size: 32px;
  font-weight: bold;
  color: #ed6b00;
}

JavaScript

$('.scroll div').on('click', function(e) {
	$('select').val($(this).data('value'));
  $('.scroll div').removeClass('active');
  $(this).addClass('active');
});