JSFiddle - React, Tailwind, and code Playground

by koodo218

HTML

<div id="wrap">
<header>
  <div class="belka_1"></div>
  <div id="header">
    <div id="logo">
      <a href="news.php"><img src="http://inferno-ots.16mb.com/strona/skins/inferno/logo.png"></a>
    </div>
    <div id="panel_logowania">
								<div id="panel_sekcja_1"><a>Panel Logowania</a></div>
				<div id="panel_sekcja_2">
					<div id="panel_input">
						<form id="login_form" action="login.php?redirect=account.php" method="post">
							<div id="logowanie">
								<div id="acc_number">
									<label for="account">Nazwa konta:</label>
																
									<input id="account" name="account" type="text" class="textfield" maxlength="11" size="21" tabindex="101" value="">
								</div>

								<div id="acc_pass">
									<label for="password">Hasło:</label>
									<input id="password" name="password" type="password" class="textfield" maxlength="32" size="21" tabindex="102" value="">
								</div>				
							</div>		
							<div id="potwierdzenie">
								<input id="login_submit" type="submit" name="login_submit" value="Zaloguj" tabindex="104">								
							</div>
						</form>					
						<div id="more_options">
							<div id="remember_me">
																<input id="remember" name="remember" type="checkbox" tabindex="103" onclick="remember_toggle(this)">
								<label for="remember">Remember Me?</label>
							</div>	
							
								<input id="register" type="submit" name="register" onclick="window.location.href='register.php'" value="Register" tabindex="105">
													
						</div>	
					</div>	
				</div>	
						
			</div>
  </div>
  <div class="belka_2"></div>
  <div id="status_bar">
    <div class="online_off"><img src="http://inferno-ots.16mb.com/strona/skins/inferno/online_off.png"></div>
    <div class="offline_on"><img src="http://inferno-ots.16mb.com/strona/skins/inferno/offline_on.png"></div>
  <div class="players">
    Player: <strong>-----</strong>
  </div>
  <div class="uptime">
    Uptime: <strong>-----</strong>
  </div>
   ...

CSS

body {
  width: 1020px;
}
#wrap {
  width: 95%;
  margin: 0 auto;
}
.belka_1 {
  height: 13px;
  background-image: url(http://inferno-ots.16mb.com/strona/skins/inferno/header_bar_1.png);
  clear: both;
}
.belka_2 {
  height: 13px;
  background-image: url(http://inferno-ots.16mb.com/strona/skins/inferno/header_bar_2.png);
}
#header {
  height: 112px;
  background-image: url(http://inferno-ots.16mb.com/strona/skins/inferno/header.png);
}
#logo {
  float: left;
  margin-left: 20px;
}

#panel_logowania {
  float: right;
}
#status_bar {
  height: 47px;
  background: url(http://inferno-ots.16mb.com/strona/skins/inferno/header_bar.png) no-repeat;
}

.online_off{
  margin-left: 50px;
}
.offline_on {
  margin-left: 20px;
}

#status_bar > * {
  float: left;
  margin-top: 10px;
}

.players{
  margin-left: 50px;
}
.uptime {
  margin-left: 20px;
}
#wyszukiwarka {
  float: right;
  margin-right: 50px;
}
.alert2 {
  background-color: #191919;
  color: red;
  text-align: center;
}