JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="dropdown small right">
  <input id="toggle2" type="checkbox" />
  <label for="toggle2">(S)</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>

<div class="dropdown">
  <input id="toggle" type="checkbox">
  <label for="toggle">[email protected]</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>
<div>
  Hello there, How are you?
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-top: 15px;
}

.dropdown {
  display: block;
  position: relative;
  width: 200px;
}
.small {
  width: 50px;
}
.right {
  float: right;
  min-width: 200px;
}

.dropdown input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.dropdown label {
  display: block;
  cursor: pointer;
  background-color: #FFF;
  padding: 7px;
  border: solid 1px;
}

.dropdown label a {
  text-decoration: none;
  color: #555;
}

.dropdown label:after {
  font-family: 'FontAwesome';
  padding-left: 10px;
  content: '\F0D7';
  float: right;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  background-color: #FFF;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  
  display: none;
  margin-top: 0px;
  padding: 0px;
  width: 99%;
  list-style: none;
}

.dropdown ul a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.dropdown ul a:hover {   
    background-color: #CCC;
}

.dropdown input[type=checkbox]:checked ~ ul {
  display: block;
}