JSFiddle - React, Tailwind, and code Playground

HTML

<div id="profileContainer">

<div class="profileField">
      	Birthday<br> 
      	<div class="select"><div class="select-styled">Select Month</div><ul class="select-options"><li rel="">Select Month</li><li rel="1">January</li><li rel="2">February</li><li rel="3">March</li><li rel="4">April</li><li rel="5">May</li><li rel="6">June</li><li rel="7">July</li><li rel="8">August</li><li rel="9">September</li><li rel="10">October</li><li rel="11">November</li><li rel="12">December</li></ul></div>
<div class="select"><div class="select-styled">Select Day</div><ul class="select-options"><li rel="">Select Day</li><li rel="1">1</li><li rel="2">2</li><li rel="3">3</li><li rel="4">4</li><li rel="5">5</li><li rel="6">6</li><li rel="7">7</li><li rel="8">8</li><li rel="9">9</li><li rel="10">10</li><li rel="11">11</li><li rel="12">12</li><li rel="13">13</li><li rel="14">14</li><li rel="15">15</li><li rel="16">16</li><li rel="17">17</li><li rel="18">18</li><li rel="19">19</li><li rel="20">20</li><li rel="21">21</li><li rel="22">22</li><li rel="23">23</li><li rel="24">24</li><li rel="25">25</li><li rel="26">26</li><li rel="27">27</li><li rel="28">28</li><li rel="29">29</li><li rel="30">30</li><li rel="31">31</li></ul></div>
<div class="select"><div class="select-styled">Select Year</div><ul class="select-options"><li rel="">Select Year</li><li rel="1900">1900</li><li rel="1901">1901</li><li rel="1902">1902</li><li rel="1903">1903</li><li rel="1904">1904</li><li rel="1905">1905</li><li rel="1906">1906</li><li rel="1907">1907</li><li rel="1908">1908</li><li rel="1909">1909</li><li rel="1910">1910</li><li rel="1911">1911</li><li rel="1912">1912</li><li rel="1913">1913</li><li rel="1914">1914</li><li rel="1915">1915</li><li rel="1916">1916</li><li rel="1917">1917</li><li rel="1918">1918</li><li rel="1919">1919</li><li rel="1920">1920</li><li rel="1921">1921</li><li rel="1922">1922</li><li rel="1923">1923</li><li rel="1924">1924</li><li rel="1925">1925</li><li rel="1926">1926</li><li...

CSS

#profileContainer {
    border-radius: 25px;
    background: #000000;
    padding: 10px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.profileField {
        padding: 10px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        font-size: 20px;
        display: inline-block; 
}

.selectMenu {
        font-family: 'Oxygen', sans-serif;
        font-size: 20px;
        height: 50px;
        -webkit-appearance: menulist-button;
}

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: #fff;
    width: 220px;
    height: 42px;
}

.select-styled.active {
    background-color: #737373;
}

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: gray;
    padding: 11px 12px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: darken(gray, 5);
  li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-top: 1px solid darken(#e74c3c, 10);
    @include transition(all 0.15s ease-in);
    &:hover {
      color: red;
      background: gray;
    }
    &[rel="hide"] {
      display: none;
    }
  }
}