JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Red Carpet Menus</h2>
  <div class="card rc-card">
    <div class="card-header rc-card-header">Vertical Ellipsis Menu
      <button class="halflings halflings-option-vertical float-right rc-btn-list"></button>
      <button class="halflings halflings-info-sign float-right rc-btn-list" data-toggle="tooltip" data-placement="top" title="Here you can view the cool new feature of this thing."></button>
    </div>
    <div class="list-group rc-list rc-hide-list">
      <a href="#" class="list-group-item">Cras justo odio</a>
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item">Morbi leo risus</a>
      <a href="#" class="list-group-item">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>
    <div class="card-block">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo sapien sed turpis lobortis convallis. Sed sem odio, finibus in metus a, ullamcorper convallis turpis. Curabitur sit amet congue sem. Mauris odio ante, sodales vitae urna in, tincidunt
        pharetra felis. Etiam elit sapien, blandit non ultricies condimentum, tincidunt non tortor. Integer non mauris commodo mauris sagittis tincidunt. Maecenas accumsan suscipit dignissim. Aenean vehicula metus sed dictum malesuada. In mollis lectus
        leo. Aenean quis cursus enim, nec fermentum est. Praesent non tempor lacus. Nullam sagittis id nisi nec blandit. In hac habitasse platea dictumst. Vestibulum sollicitudin, orci in bibendum elementum,...

SCSS

body {
  overflow-x: hidden;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.rc-card {
	padding: 0;
	margin-top: 2rem;
	padding-top: 1rem 0;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(150, 150, 150, 0.35);
	-moz-box-shadow: 0px 0px 12px 0px rgba(150, 150, 150, 0.35);
	box-shadow: 0px 0px 12px 0px rgba(150, 150, 150, 0.35);
}

.rc-card-header {
	font-size: 1.4rem;
	background: #fff;
	font-weight: 400;
  span {
    margin-left: 1rem;
  }
}

.rc-btn-list {
  background: #fff;
  border: 0;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  padding-top: 0.3rem;
}

.rc-hide-list {
  list-style: none;
  display: none;
}

.rc-show-list {
  position: absolute;
  top: 50px;
  right: 0;
  display: block;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff) format('woff'), url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

.halflings {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.halflings-option-vertical {
  &:before {
    content: "\E235";
  }
}

.halflings-option-vertical {
  color: #000;
  text-decoration: none;
  &:link, &:visited, &:hover, &:active {
   ...

JavaScript

var rcBtnList = document.querySelector(".rc-btn-list")
rcBtnList.addEventListener("click", function() {
  document.querySelector(".rc-list").classList.toggle("rc-show-list")
})

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})