JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<select>
  <option>&#xf26e 500px</option>
  <option>&#xf042 Adjust</option>
  <option>&#xf170 Adn</option>
  <option>&#xf037 Align-center</option>
  <option>&#xf039 Align-justify</option>
  <option>&#xf036 Align-left</option>
  <option>&#xf038 Align-right</option>
  
  
</select>

<select id="gender">
  <option value="male">male</option>
  <option value="female">female</option>
  <option value="others">others</option>
</select>

CSS

select{
  font-family: FontAwesome, sans-serif;
}

select#gender option[value="male"]   { background-image:url(https://d15ynbi2opsela.cloudfront.net/wp-content/uploads/2017/04/Austria.png);   }
select#gender option[value="female"] { background-image:url(https://d15ynbi2opsela.cloudfront.net/wp-content/uploads/2017/04/Austria.png); }
select#gender option[value="others"] { background-image:url(https://d15ynbi2opsela.cloudfront.net/wp-content/uploads/2017/04/Austria.png); }