JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
    
    <link rel="shortcut icon" type="image/x-icon" href="" />
    <!--link rel="stylesheet" type="text/css" href="http://s16.ru/test/css/main.css" /-->
    <link rel="stylesheet" type="text/css" href="http://s16.ru/test/css/jcarousel.css" />
    
    <script type="text/javascript" src="http://s16.ru/test/js/jq.js"></script>
    <script type="text/javascript" src="http://s16.ru/test/js/jcarousel.js"></script>
    <script type="text/javascript" src="http://s16.ru/test/js/main.js"></script>
</head>
<body>
  <div class="header">  
    
    <div class="header_logo">
      <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSwX2E3_DkFlT9GFzi82k2Gusi2HsEDrkAMxurnvZxy9sS_tgQ--tmqltSM" alt="" />
    </div>
    
    <div class="header_slider">
      <ul id="header-slider" class="jcarousel-skin-tango">
        <li><img src="http://s16.ru/test/img/1.jpg" alt="" /></li>
        <li><img src="http://s16.ru/test/img/2.jpg" alt="" /></li>
      </ul>
    </div>    
    
    <div class="header_menu">
      <ul class="header_menu__list">
        <li><a href="#">Menu item #1</a></li>
        <li><a href="#">Menu item #2</a></li>
        <li><a href="#">Menu item #3</a></li>
        <li><a href="#">Menu item #4</a></li>
      </ul>
    </div>
    
  </div>
  
  <div class="content">
    
  </div>
  <div class="footer">
    
  </div>
</body>
</html>

CSS

*:focus {outline:none; }
* html {filter: expression(document.execCommand("BackgroundImageCache", false, true)); }

body {
    color: #5f5f5f;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
}

table { border-collapse: collapse; }
table td { 
    padding: 0; 
    margin: 0; 
}

p { 
    margin: 0;
    line-height: 1.1em;
}

a {
    color: #404244;
    text-decoration: underline;
}

/* Header */
.header { 
  position: relative;
  }

  .header_logo {
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 10px;
    }
  
  .header_slider {
    position: relative;
    z-index: 1;
    }

  .header_menu {
    position: absolute;
    left: 10px;
    bottom: 0;
    }
    .header_menu__list {}
      .header_menu__list > li {
        display: inline-block;
      }