JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select" ng-show="!isEmptyList">
    <select></select>
    <a class="select-caret"></a>
    <!--[if IE 9]>
   <div class="original-caret-hide">
    <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200"
     pointer-events="none">
      <rect x="0" y="0" width="100" height="100" />
    </svg>
   </div>
  <![endif]-->
</div>

SCSS

/* CSS Triangle http://css-tricks.com/snippets/css/css-triangle/ */
@mixin arrow($direction, $color, $width, $height: ($width / 2)) {
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 0;

	@if $direction == right {
		border-top: $width / 2 solid transparent;
		border-bottom: $width / 2 solid transparent;
		border-left: $height solid $color;
	} @else if $direction == left {
		border-top: $width / 2 solid transparent;
		border-bottom: $width / 2 solid transparent;
		border-right: $height solid $color;
	} @else if $direction == up {
		border-left: $width / 2 solid transparent;
		border-right: $width / 2 solid transparent;
		border-bottom: $height solid $color;
	} @else if $direction == down {
		border-left: $width / 2 solid transparent;
		border-right: $width / 2 solid transparent;
		border-top: $height solid $color;
	}
}
$select-background: #fff;
$select-color: #000;
%select-moz-compability {
	text-indent: 0.01px;
	text-overflow: "";
}

%select-ie-compability {
	&::-ms-expand {
		display: none;
	}
}





.select {
	position: relative;
	display: inline-block;
	background: $select-background;
	z-index: 0;

	.select-caret {
		@include arrow(down, $color-primary, spacing(0.75), $height: (spacing(0.75) / 2));
		@include position(absolute, spacing(0.75), spacing(0.75));
		@include pseudo-element(nil, nil);
		z-index: -1;
		pointer-events: none;
	}

	select {
		@extend %select-moz-compability;
		@extend %select-ie-compability;
		@extend %unstyled-input;
		@include spacing-padding(0.5, 0.75, 0.5, 0);
		background: transparent;
		color: $select-color;
		z-index: 1;
	}
}

// IE 9 Compatibility: Hide the original caret by the browser and a workaround for pointer events
.lt-ie10 {
	.select {
		select {
			@include padding-horizontal(0);
		}

		.select-caret {
			right: spacing(1);
		}

		.original-caret-hide {
			@include pseudo-element(spacing(1), nil);
			@include position(absolute, 0, 0, 0);
			overflow: hidden;

			rect {
				fill:...