JSFiddle - React, Tailwind, and code Playground

by Per Andersson

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...

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;
  white-space: nowrap;
}

.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;
    }
  }
}