JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <title>Me</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="My first site"/>
    <link rel ="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
    <div class="header clearfix">
    <div class="logo">
        <a href=""><img id="logo" src="Logo1.png" ></a>
    </div>
        <ul class="nav clearfix">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Galleries</a></li>
            <li><a href="">Blog</a></li>
        </ul>
    </div>
        <div class="slider">
            <h1>Dancing Taste Buds</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales lacus at turpis scelerisque eu ullamcorper enim mattis. Quisque ultrices, neque et blandit rhoncus, ante magna commodo
            <a href=""><img src="Read_More.png" id="read"></a>
            </p>
            <div class="dots">
            <a href=""><div class="dot"></div></a>
            <a href=""><div class="dot"></div></a>
            <a href=""><div class="dot"></div></a>
            <a href=""><div class="dot"></div></a>
            <a href=""><div class="dot"></div></a>
            <a href=""><div class="dot"></div></a>
            <a href=""><div class="dot"></div></a>
            </div>
        </div>
        <div class="pre-content">
         <div class="mycell">
         <a href=""><img src="More.png" class="morebutton"></a>
         </div>
         <div class="mycell">
         <a href=""><img src="More_1.png" class="morebutton"></a>
         </div>
         <div class="mycell">
         <a href=""><img src="More_2.png" class="morebutton"></a>
         </div>
        </div>
        <div class="content clearfix">
        <div class="obertka">
        <a href="" class="content_a">Hot Recipes</a>
        <a...

CSS

@font-face {
    font-family: Myriad_Pro_SemiBold; /* Гарнитура шрифта */
    src: local(Myriad Pro SemiBold);
    src: url(Myriad_Pro_SemiBold.ttf); /* Путь к файлу со шрифтом */
   }
   @font-face {
    font-family: Myriad_Pro_Regular; /* Гарнитура шрифта */
    src: local(Myriad Pro Regular);
    src: url(Myriad_Pro_Regular.ttf); /* Путь к файлу со шрифтом */
   }
      @font-face {
    font-family: Trebuchet_MS; /* Гарнитура шрифта */
    src: local(Trebuchet MS);
    src: url(Trebuchet_MS.ttf); /* Путь к файлу со шрифтом */
   }
 body{
 	margin: 0;
 	padding: 0;
 	width:100%;
 	font: 14px telegrafico, Arial;
 	background: url("Layer_1.png") repeat-x;
 }
 .clearfix:after, .clearfix:before
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul, ol, a{
list-style: none;
text-decoration: none;
}
 .wrapper{
	width: 65%;
	margin: auto;
	height: auto;
}
.header{
	padding-top:30px; 
	height:75px;
	width:auto;
	margin:auto; 
}
.logo{
	min-width: 250px;
	float: left;
	margin-right: 6%;
}
.nav{
	float: right;
	width: 70%;
	margin-bottom: 0;
	font:16px Trebuchet_MS, Arial;
	background: #9cc303;
}
.nav li{
	float: left;
	padding-right:6%;
	line-height: 40px;
	text-transform: uppercase;
}
.nav a{
	color: #ffffff;
}
.slider{
	height: 350px;
	background: #ffffff;
	margin-top:-15px;
}
.slider h1{
	font: 30px Trebuchet_MS, Arial;
	color: #728d09;
	margin-left: 2.5%;
	padding-top: 50px;
	display: block;
	font-weight: bold;
}
.slider p{
	font: 16px Myriad_Pro_Regular, Arial;
	color: #0f0f0f;
	margin-left: 2.5%;
	width: 30%;
	display: block;
}
.slider #read{
	margin: 50px auto;
	display: block;
}
.dots{
	margin-top: -60px;
	margin-right: 4%;
	float: right;
}
.dot{
	width: 14px;
	height: 14px;
	background: #9cc303;
	border-radius: 7px;
	display: inline-block;
}
.dot:hover{
background: #803e1b;
}
.pre-content{
	height: 200px;
	background: #ffffff;
}
.mycell{
	height: 160px;
	background: #b8e603;
	width: 30%;
	margin-left: 2.2%;
	display:...