JSFiddle - React, Tailwind, and code Playground

Fliplet notification send

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
				<h2 class="text-center">Send a notification to your app</h2>
				<hr>
				<p class="lead text-center" style="margin-bottom: 1em;">Configure your message</p>
				<div class="row">
					<form class="col-xs-5">
						<div class="form-group">
							<label for="exampleInputEmail1">Compose message (optional) <small class="text-muted" style="font-weight:normal;">10 words recommended</small>
							</label>
							<textarea class="form-control" rows="4" placeholder="(Optional) You can send a notification without a message to only increment the app badge on iOS devices"></textarea>
							<div class="pull-right text-muted" id="countlabel"><span id="count">235</span> character(s) left</div>
						</div>
						<div class="checkbox clearfix" style="margin-top: 2em;"> <span style="display:inline-block;width:75px;height:75px;position:relative;top:25px;overflow:hidden;"><img src="https://help.exacttarget.com/Global/Documentation/February2013Release/5.png" style="position:absolute;top:0;right:0;width:145px" /></span>
							<label style="position: relative; top: 12px; margin-right:40px;margin-left:-10px">Increment app icon badge by 1
								<br>(available for iOS only)</label>
							<input type="checkbox" checked class="pull-right">
						</div>
					</form>
					<div class="col-xs-7...

JavaScript

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

$(":checkbox").bootstrapSwitch();

$('#datetimepicker12').datetimepicker({
    inline: true,
    sideBySide: true
});

$('.btn-group .btn, .btn-group-vertical .btn').click(function () {
    $(this).removeClass('btn-default').addClass('btn-primary').siblings().removeClass('btn-primary').addClass('btn-default');
});

$('#send-when .btn').click(function () {
    if ($(this).index() === 1) {
        $('#schedule-later').show();
    } else {
        $('#schedule-later').hide();
    }
});

$('textarea').on('keyup paste input', function () {
    var count = $(this).val().length;
    $('#count').html(235 - count);
    if (count > 235) {
        $('#countlabel').addClass('text-danger');
    } else {
        $('#countlabel').removeClass('text-danger');
    }
});