JSFiddle - React, Tailwind, and code Playground

by Jonathon Mascorella

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
 <div class="alert alert-warning user-feedback">
    Alert
  </div>
</div>
<button class="btn btn-success alert-clicker">Click!</button>
  <div class="row">
    <div class="col-xs-12">
      <ul class="nav nav-tabs" id="myTabs">
        <li role="presentation" class="active"><a href="#home">Login</a></li>
        <li role="presentation"><a href="#voting">Voting</a></li>
        <li role="presentation"><a href="#admin">Admin</a></li>
      </ul>

       <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
          <div class="row">
            <div class="col-xs-12">
              <div class="voter-login">
                <p>Please enter your ID and passcode below to vote. </p>
                <div class="form-group">
                  <input type="text" class="form-control" name="voterId" placeholder="Voter ID" >
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" name="voterPass" placeholder="Passcode" >
                </div>
                <div class="form-group">
                  <button class="btn btn-success vfm-voter">Login
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div role="tabpanel" class="tab-pane" id="voting">
          <div class="row">
            <div class="col-xs-12">
               <h3>Select issue to vote for:</h3>
               <div class="form-group">
                 <select name="community_issues" class="form-control"></select>
               </div>
              ...

CSS

.container-fluid {
  border: 10px solid #73263D;
  background-color: white;
  color: black;
  border-radius: 20px;
  padding: 10px;
  width: 100%;
  height: 100%;
}

.user-feedback{
  float:left;
  position:absolute;
  display:none;
  left:30%;
  width:200px;
  top:50px;
  z-index:999;
  text-align:center;
}

JavaScript

isLoggedin = false;
isAdmin = false;

$('.alert-clicker').click(function() {
	loadMessage('Vote for current issues within your local area!');
});

function loadMessage(message) {
	$('.user-feedback').html(message).fadeIn().delay(3000).promise().then(function() {
  	$('.user-feedback').html(message).fadeOut().promise().then( function() {
    	$(this).html('');
  });
});
}