JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Букеты</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    	<div class="container">
        	<div class="header">
            	<ul class="menu">
                	<li><a href="index.htm">О компании</a></li>
                    <li><a href="#">Новости цветов</a></li>
                    <li><a href="#">Доставка цветов</a></li>
                    <li><a href="#">Статьи о цветах</a></li>
                </ul>
              <p class="ico">
                	<a href="index.htm"><img src="images/ico-home.gif" width="11" height="15" alt="Домой"/></a>
                	<img src="images/ico-border.gif" width="1" height="15" alt=""/>
                    <a href="#"><img src="images/ico-contact.gif" width="11" height="15" alt="Контакты"/></a>
                    <img src="images/ico-border.gif" width="1" height="15" alt=""/>
                    <a href="#"><img src="images/ico-map.gif" width="11" height="15" alt="Карта"/></a>
                </p>
              <div class="logo">
              	<a href="#"><img src="images/logo.png" width="211" height="157" alt="logo"/></a>
              </div>
            	<img class="head-left" src="images/header_buket_left.png" width="238" height="156" alt="buket_left"/> 
                <img class="head-right" src="images/header_buket_right.png" width="220" height="167" alt="buket_right"/> 
            </div>
            <div class="content-main">
           	  <div class="content">
                	<h1>Каталог цветов</h1>
                    <div class="categories">
                    	<ul>
                        	<li><a href="#">Свадебные цветы</a> \</li>
                            <li><a class="activ" href="#">Букет из роз 15</a></li>
                        </ul>
                    </div>
                <div class="content-flowers">
           	    	 <div class="blog">
                      <img...

CSS

@charset "utf-8";
@import url(reset.css);
/* CSS Document */

body {
	background: #ced3c2;
}

.container {
	margin: 18px auto;
	min-width: 945px;
	max-width: 1300px;
}

.header {
	background: url(../images/header_bg.jpg) left top repeat-x;
	overflow: hidden;
	position: relative;
	height: 235px;
}

.menu {
	overflow: hidden;
	position: relative;
	float: left;
	margin: 50px 0 0 28%;
}

.menu li {
	margin: 0 20px 0 0;
	float: left;
	font-family: Plumb;
	font-size: 15px;
	font-weight:normal;
	text-transform: uppercase;
}

.menu li a {
	color: #be1a2a;
}

.ico {
	float: right;
	margin: 50px 45px 0 0;

}

.ico img {
	margin: 0 7px;
}

.head-left {
	float: left;
	position: absolute;
	left: 0;
	bottom: 0;
}

.logo {
	margin: 0 auto;
	position: relative;
	padding: 78px 0 0 0;
	width: 211px; 
	height: 157px;
}

.head-right {
	float: right;
	position: absolute;
	right: 0;
	bottom: 0;
}

.content-main {
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
}

.content h1 {
	padding: 18px 0 0 241px;
	font-family: Plumb;
	font-size: 24px;
	font-weight: normal;
	color: #38441b;
}

.categories {
	padding: 0 0 0 241px;
	overflow: hidden;
}

.categories li {
	font-family: Plumb;
	margin: 0 7px 0 0;
	float: left;
	line-height: 1.5;
	font-size: 14px;
	font-weight: normal;
}

.categories li a {
	color: #be1a2a;
}

.activ {
	text-decoration: none;
}

.content-flowers {
	margin: 0 0 50px 73px;
	overflow: hidden;
	float: left;
}

.blog {
	float: left;
}

.blog img {
	margin: 20px 0 10px 40px;
}

.blog-link {
	margin: 0 0;
	overflow: hidden;
}



.blog-link li {
	float: left;
	padding: 0 45px;
	margin: 0 -33px 0 41px;
	font-family: Plumb;
	font-size: 14px;
	font-weight: normal;
}

.blog-link li a {
	color: #be1a2a;
}

#end {
	padding:0 0 0 20px;
}

.contact {
	border: 1px solid #FC0202;
	margin: 0 0 25px 25px;
}

.contact p {
	font-family: Plumb;
	font-size: 12px;
	font-weight: normal;
	color: #38441b;
}

.contact span {
	font-family: Plumb;
	font-size: 12px;
	font-weight:...