JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="header">
<div class="logo">Sample Login System</div>
<div class="logoutarea">
<div class="loggedInAs">Logged in as (joe).</div>
<div class="logout">Logout</div>
</div>
</div>
<div class="content">
<div class="actionarea" id="sortable">
<div class="statusset">
<fieldset>
<legend>Status:</legend>
<div class="startbtn" status="off">Start Taking Calls/Text</div>
<div class="callstatusarea">
<span class="callstatusheader">Call/Text Status:</span>
<span class="status" status="free">Free</span>
</div>
</fieldset>
</div>
<div class="textmessageset">
<fieldset>
<legend>Send Outbound Text Message:</legend>
<div class="inputline sendtextfrom">
<div class="label">Send Text From:</div>
<select class="fromselect">
<option value="+19998887777">+19998887777</option>
<option value="+16665554444">+16665554444</option>
</select>
</div>
<div class="inputline sendtextto">
<div class="label">Send Text To:</div>
<input class="phoneinput sendtexttoinput" type="text" placeholder="To Phone Number..."/>
</div>
<div class="inputline sendtextresponsebackto">
<div class="label">Response Number: </div>
<input class="phoneinput sendtextresponsebackinput" type="text" placeholder="Your Phone Number..." title="(If no response back number given or response back number known to be busy in the system, then the system will automatically determine who to send text to)"/>
...
CSS
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11,...
JavaScript
$(document).ready(function(){
//@JA - Logout Fuction
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
//$( "#sortable" ).disableSelection();
});