JSFiddle - React, Tailwind, and code Playground

by TheOrdinaryGeek

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Library Log in</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"><meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width = device-width, user-scalable = no">
    <script type="text/javascript" src="/scripts/common.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="/apps/CAS/resources/login_mobile.css">
    <link rel="stylesheet" type="text/css" href="/apps/CAS/resources/login_s2.css" media="screen and (min-device-width: 481px)"> -->
    
    <link rel="stylesheet" type="text/css" href="/apps/CAS/resources/login_mobile.css"  />
	<style type="text/css" media="screen and (min-width: 481px)">
    <!--
    @import url("/apps/CAS/resources/login.css");
    -->
    </style>
    <!--[if IE]><link rel="stylesheet" type="text/css" href="/apps/CAS/resources/login_s2.css"  media="screen" /><![endif]-->
    <link href="/apps/CAS/resources/login_mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
    
</head>

<body id="cas">
<!--[if IE]>
<div id="ie">
<![endif]-->
<div class="loginPage">

<div class="loginTop">
&nbsp;<!-- Prevent div collapse -->
<div class="loginTopLogo">
<!--<a href="http://qu-lms.qub.ac.uk/search~S2"><img src="/screens/honni_logo.gif" alt="honni Logo"></a> Replaced with line below for Encore go-live -->
<a href="http://www.honni.qub.ac.uk"><img src="/screens/honni_logo.gif" alt="honni Logo"></a> 
</div>
</div>
<!-- <div style="color: #990000;  width: 600px; font-weight: bold; margin-bottom: 20px;  text-align: left; margin: auto;" >
Access to My Account is currently unavailable.   We apologise for any inconvenience this may cause.-->
</div>
<!-- Use for dual external and library authentication: -->
<div class="loginArea...

CSS

@charset "utf-8";
/* IPSSO Login CSS Mobile */

body { background:#e8e4e4; font-family:Verdana,Arial,Helvetica,sans-serif; font-style:normal; font-weight: normal; color:#686868; margin:0; }

a:link { color:#014184; }

a:active, a:visited, a:hover { color:#7C14B8; }

.clearfloats { clear:both; }

.errors { background:#FFCC66; border:1px solid #CC3300; color:#CC3300; font-weight:bold; margin:0 0.8em 1em; padding:0.5em; }

.loginArea { padding-top:.5em; font-size:.85em; }

.loginArea fieldset { border:none; }

.loginField { font-size:1.25em; margin:2px 0px 10px 0; padding:2px; text-align:left; width:220px; }

fieldset .barcodeAltChoice { margin:1.2em 0; padding:0; }

fieldset .newpin { margin-top:1em; padding:0 }

.formButtons div { display:inline; }

.loginActionScreenOnly, .loginActionSeparator, .loginActionText { display:none; }

.loginAction { margin:0 0 10px 0; }

.loginAction a { background:url("arrow.gif") 95% center no-repeat #ececec; border-top:1px solid #ffffff; color:#f7931e; display:block; font-weight:bold; height:25px; padding:10px 0 0 10px; text-decoration:none; }

.loginArea form { margin:.8em auto 0 auto; text-align:left; }

.loginArea label { display:block; }

.loginArea legend { color:#000000; padding:0; font-size:1.2em; }

.barcodeAltChoice legend, .newpin legend { font-size:1em; margin-bottom:.5em; font-style:normal; }

div #login_ldap { border-bottom:1px solid #686868; margin-bottom:1em; }

#login_ldap .loginSubmit { float:right; position:relative; top:-3em; }

#login .loginSubmit { float:right; position:relative; top:-3em; }

.loginTop { background:#FFFFFF; text-align:center; }

.loginTopLogo { margin: 0 auto 1em; padding-bottom:1em; }

.loginTopLogo img { border:none; }


/* sprite button */
.formButtons a { display:none; }

/* Overrides to prevent possible conflict with styles.css */

body > div { background:none; padding-bottom:0; padding-top:0; }