JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<div class="dialog">
  <div class="dialogTop">
    <a href="javascript;" class="btn roundBtn left">&laquo;</a>
    <a href="javascript;" class="btn roundBtn right">&raquo;</a>
    Settings
  </div>
  <div class="dialogBody">
    <div class="dialogSubtitle">
      GENERAL
    </div>
  
  </div>
</div>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
  background: #c0cad3; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #c0cad3 0%, #93a0af 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c0cad3), color-stop(100%,#93a0af)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #c0cad3 0%,#93a0af 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #c0cad3 0%,#93a0af 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #c0cad3 0%,#93a0af 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #c0cad3 0%,#93a0af 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0cad3', endColorstr='#93a0af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.dialog {
  position: relative;
  display: none;
  width: 320px;  
  box-shadow: 0 12px 12px -10px rgba(0,0,0,0.4);
}

.dialogTop {
  position: relative;
  padding: 15px 12px 12px 12px;
  font-size: 15px;
  font-weight: bold;
  color: #535252;
  text-shadow: 0 1px 0 rgba(255,255,255,0.32);
  text-align: center;
  border-radius: 5px 5px 0 0;
  border: 1px solid #838b98;
  border-bottom: none;
  box-shadow: inset 0 3px 2px -2px rgba(255,255,255,0.4);
  background: #d6d4d5; /* Old browsers */
  background: -moz-linear-gradient(top, #d6d4d5 0%, #b1b1b1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6d4d5), color-stop(100%,#b1b1b1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #d6d4d5 0%,#b1b1b1 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #d6d4d5 0%,#b1b1b1 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #d6d4d5 0%,#b1b1b1 100%); /* IE10+ */
  background: linear-gradient(to bottom,...

JavaScript

$('.dialog').draggable({
    handle: '.dialogTop'
});

$('.dialog').delay(2000).fadeIn(300);