JSFiddle - React, Tailwind, and code Playground

by jmcausing

HTML

<div id="question">
        	<div id="qwrap">
            <ul class="question2">
               <li id="modem_offline">Modem offline</li>
			   <li id="intermittent">Intermittent</li>
			   <li id="wireless">Slow Speed</li>
			   <li id="wireless">Wireless Issue?</li>
			   <li id="email">Email</li>
               <li id="wireless">My Services</li>
			    <li id="wireless">McAfee</li>
            </ul>
        </div>

CSS

ul.question2 li {
background : #BDBDBD;
padding : 5px;
margin : 5px;
margin-bottom : 10px;
margin-left : -10px;
width : 70%;
cursor : pointer;    
}

.appriseOverlay {
position : fixed;
top : 0;
left : 0;
background : rgba(0, 0, 0, 0.3);
display : none;
}
.appriseOuter {
background : #eee;
border : #fff solid 1px;
box-shadow : 0 3px 7px #333;
border-radius : 4px;
position : absolute;
z-index : 99999999;
min-width : 200px;
min-height : 50px;
max-width : 75%;
position : fixed;
display : none;
}
.appriseInner {
padding : 20px;
color : #333;
text-shadow : 0 1px 0 #fff;
}
.appriseInner button {
border : #bbb solid 1px;
border-radius : 3px;
color : #232d3d;
font-size : 12px;
font-weight : bold;
padding : 4px 10px;
margin : 0 3px;
text-shadow : 0 1px 0 #fff;
cursor : pointer;
box-shadow : 0 1px 2px #ccc;
}
.appriseInner button:hover {
color : #d85054;
}
.aButtons, .aInput {
margin : 20px 10px 0 10px;
text-align : center;
}
.aTextbox {
border : #aaa solid 1px;
border-radius : 4px;
box-shadow : 0 1px 0 #fff;
width : 180px;
font-size : 12px;
font-weight : bold;
padding : 5px 10px;
}

JavaScript

$(document).ready(function() {
  var txt = $("textarea");
  $("#question li").click(function(){
		var question=$(this).html();
		var question_id = $(this).attr('id');
		$(document).ready(function() { clear_all(); }); 

          	if(question_id == 'modem_offline')  { $(document).ready(function() { apprise('Hello'); }
			
		});
});

// Apprise 1.5 by Daniel Raftery
// http://thrivingkings.com/apprise
//
// Button text added by Adam Bezulski
//

function apprise(string, args, callback)
	{
	var default_args =
		{
		'confirm'		:	false, 		// Ok and Cancel buttons
		'verify'		:	false,		// Yes and No buttons
		'input'			:	false, 		// Text input (can be true or string for default text)
		'animate'		:	false,		// Groovy animation (can true or number, default is 400)
		'textOk'		:	'Ok',		// Ok button default text
		'textCancel'	:	'Cancel',	// Cancel button default text
		'textYes'		:	'Yes',		// Yes button default text
		'textNo'		:	'No'		// No button default text
		}
	
	if(args) 
		{
		for(var index in default_args) 
			{ if(typeof args[index] == "undefined") args[index] = default_args[index]; } 
		}
	
	var aHeight = $(document).height();
	var aWidth = $(document).width();
	$('body').append('<div class="appriseOverlay" id="aOverlay"></div>');
	$('.appriseOverlay').css('height', aHeight).css('width', aWidth).fadeIn(100);
	$('body').append('<div class="appriseOuter"></div>');
	$('.appriseOuter').append('<div class="appriseInner"></div>');
	$('.appriseInner').append(string);
    $('.appriseOuter').css("left", ( $(window).width() - $('.appriseOuter').width() ) / 2+$(window).scrollLeft() + "px");
    
    if(args)
		{
		if(args['animate'])
			{ 
			var aniSpeed = args['animate'];
			if(isNaN(aniSpeed)) { aniSpeed = 400; }
			$('.appriseOuter').css('top', '-200px').show().animate({top:"100px"}, aniSpeed);
			}
		else
			{ $('.appriseOuter').css('top', '100px').fadeIn(200); }
		}
	else
		{ $('.appriseOuter').css('top', '100px').fadeIn(200); }
    
    if(args)
    	{
   ...