JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="center">
  <select name="sources" id="sources" class="custom-select sources" placeholder="Source Type">
    <option value="profile">Profile</option>
    <option value="word">Word</option>
    <option value="hashtag">Hashtag</option>
  </select>
</div>

CSS

.slick-slide {
	/* height: 250px; */
	text-align: center;
	color: #000;
	padding: 10px;
	margin: 0 10px;
}

.slick-slide {
	background: #eee;
	font-size: 16px;
	color: #4297aa;
	font-weight: 600;
}

.slick-prev {
	left: 5px;
	z-index: 1000;
}

.slick-next {
	right: 5px;
	z-index: 1000;
}

.slick-slide img {
	margin: auto;
	cursor: pointer;
	margin-bottom: 5px;
}

.slick-slide:hover {
	-moz-box-shadow: inset 0px 0px 0px 3px #4297aa;
	box-shadow: inset 0px 0px 0px 3px #4297aa;
}

.slick-list {
	outline: none !important;
}

.slick-slide:focus {
	outline: none;
}

.slick-next:before,
.slick-prev:before {
	color: #ccc !important;
}

JavaScript

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';
  
  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});
$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});