JSFiddle - React, Tailwind, and code Playground

by Fathoni Muhammad

HTML

<div id='error-page'>
<div class='error-404'>404</div>
<div class='large-heading2'>HALAMAN TIDAK DITEMUKAN</div><br/>
<div class='light-heading1'>Maaf, kemungkinan halaman telah dihapus, atau Anda salah menuliskan URL.</div><br/>
<div class='light-heading2'>Silahkan kembali ke Halaman Utama <b>Blog Thoni</b>, Klik <a href='http://blog-thoni.blogspot.com/' title='Homepage'><span style='background:#f1f1f1;border:1px solid #aaa;border-radius:3px;padding:2px 5px'><b>DI SINI</b></span></a> untuk kembali ke homepage Blog Thoni.<br/>
Atau gunakan <b>Search Box</b> di bawah ini untuk kembali mencari artikel yang Anda inginkan.
</div>
    
<div style='float:none;margin-left:525px'>
<form action='/search' class='search-form'>
<input id='a' name='q' placeholder='Cari artikel di sini...' type='text'/>
<button title='Search' type='submit'>SEARCH</button>
</form>
</div>

</div>

CSS

.search-form input{width:198px;height:35px;line-height:35px;padding:0 12px;float:left;font:normal 12px Arial,sans-serif;border:1px solid #ddd;background:#fff;}
.search-form input:focus{outline:0;background:#fff;border:1px solid #C62C2C}
.search-form button{overflow:visible;float:left;border:1px solid #ddd;
padding:0;cursor:pointer;height:35px;width:72px;color:#fff;font:12px Arial;text-shadow:none;text-transform: uppercase;background:#C62C2C;}
.search-form button:hover{color:#fff;text-shadow:none;background:#9E3232;transition:0.5s;border:1px solid #ddd;}

#error-page{background-color:#e1e1e1;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;}
#error-page .error-404 {text-align: center; transition: all 0.8s ease 0s;color:#b0130d; font-size: 150px; font-weight:bold;padding:80px 80px 10px 70px; margin:30px 480px 30px 480px} 
#error-page .error-404:hover {color: #333;} 
#error-page .large-heading2 {color: #333;font-size: 48px;padding-bottom:20px} 
#error-page .light-heading1 {color: #555;font-size: 20px;} 
#error-page .light-heading2 {color: #555;font-size: 15px;line-height:1.8em;margin-bottom:30px}