JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<a href="javascript:void(0)" id="signin_popover_trigger" class="popover_trigger" data-name="signin" data-toggle="popover">Sign in</a>
<div class="signin_popover_content">
    <div class="signin_wrapper">
        <form class="user_access_form" method="post">
        <h4 class="blue weight-bold">Sign in</h4>
        <label class="grey weight-normal">Email:</label>
        <input type="text" name="user_email" class="form-control margin-bottom">
        <label class="grey weight-normal">Password:</label>
        <input type="password" name="password" class="form-control margin-bottom">
        <input type="submit" class="btn btn-info margin-top user_access_submit" name="sign_in_submit" value="Sign in">
        </form>
    </div>
</div>

CSS

.signin_popover_content {
    display: none;
}

JavaScript

$('.user_access_form').submit(function(e){
    e.preventDefault();
    alert('asdf');
});


$('#signin_popover_trigger').popover({
    html: true,
    content: function(){
        return $('.signin_popover_content').html();
    },
    placement: 'bottom',

});