JSFiddle - React, Tailwind, and code Playground
by karthick6891
HTML
<!DOCTYPE html>
<html class="ui-mobile">
<head xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href=".">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="./css/vendor/jquery.mobile.min.css"></link>
<style>
/**
* Globals
*/
h1,h2 {
font: small-caps bold 100% Constantia, 'Palatino Linotype', Palatino, Georgia, serif !important;
}
h3 {
font: small-caps bold 150% Constantia, 'Palatino Linotype', Palatino, Georgia, serif !important;
}
* { margin:0; }
.ui-btn {
font: small-caps bold 100% Constantia, 'Palatino Linotype', Palatino, Georgia, serif !important;
}
.myFontStyle {
margin: 0.5em 0 0 0 !important;
font: small-caps bold 100% Constantia, 'Palatino Linotype', Palatino, Georgia, serif !important;
}
.alignLeft {
text-align: left;
}
.alignCenter {
text-align: center;
}
.lineSeparator {
margin-top:1em;
border-color: gray;
}
.inlineToBlock {
display:inline-block !important;
}
/**
* Styles
*/
.center-wrapper {
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
.oneBtn {
width: 200px !important;
}
.logo {
padding: 5px;
width: 30px;
height: 30px;
}
.custom-corners .ui-bar {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.custom-corners .ui-body {
border-top-width: 0;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
</style>
<title>Mobile</title>
</head>
<body class="ui-mobile-viewport">
<div data-role="page" id="loginPage">
<div data-position="fixed" data-role="header" data-theme="a">
<img src="./images/FPL_logo_PMS2925.jpg" class="ui-btn-left...