JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainheader">
	<div class="headercontent">
		<div class="menulist">
		<ul class="items">
			<li class="headeritem"><a href="#">Home</a></li>
			<li class="headeritem"><a href="#">APP</a></li>
			<li class="headeritem"><a href="#">Webdesign</a></li>
			<li class="headeritem"><a href="#">SEO</a></li>
			<li class="headeritem"><a href="#">Online Marketing</a></li>
		</ul>
		</div>
			<a href="#" class="headerlogo">
			<span class="companyname"><img src="images/header_logo.png" alt="Awesom Media" width="250" height="65"></span>
			</a>
			<div class="socialblock">
<a href="https://www.facebook.com/awesommedia" target="_blank" title=" Facebook " class="socialicon"><i class="icon-facebook-sign"></i></a>
<a href="#" title="Twitter" class="socialicon"><i class="icon-twitter-sign"></i></a>
<a href="https://plus.google.com/109696011372792632771/about" target="_blank" title="Google Plus" class="socialicon"><i class="icon-google-plus-sign"></i></a>
</div>
</div>

</div>

    <div class="appsblock whiteblock block">
        <a name="apps"></a>
        <div class="block-container">
            <h2 class="title">Noch jemand ohne APP  ?</h2>
            <div class="description"><p style="font-style:italic; color:#51BBFF;">" Creativity is allowing yourself to make mistakes. 
			<br>Art is knowing which ones to keep. "</p>
			</div>
            <div class="apps">
                <div class="slider">
                    <div class="navigation navigation-left">
                        <i class="icon-chevron-left"></i>
                    </div>
                    <div class="navigation navigation-right">
                        <i class="icon-chevron-right"></i>
                    </div>
                    <div class="rotator">
                        <div class="slide active">
                            <div class="picture">
                                <img src="images/ipad.png" alt="ipad">
                            </div>
                            <div...

CSS

html,
html a{-webkit-font-smoothing:subpixel-antialiased !important;text-decoration:none;}
body{background:#ffffff;font-family:'Muli', sans-serif;font-size:16px;letter-spacing:0;line-height:1.5;margin:0;padding:0;overflow:visible;color:#282828;}
a{color:#3bacff;}
.mainheader	{
	position:fixed;
	width:100%;
	z-index:1000;
	top:0;
	left:0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
text-align: center;
background: rgb(255, 255, 255);}
	.headercontent{
		max-width:1350px;
		width:100%;
		margin:0 auto;
		}
		.menulist {
display: inline-block;
text-align: center;
padding: 0em 1em 0em 1em;
position: relative;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.items	{display:inline-block;}

.headeritem{float:left;list-style:none;}
.menulist .items .headeritem a {
color: rgb(189, 188, 188);
display: inline-block;
padding: 0.6em 1em;
margin: 0 0.5em;
border-radius: 4px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
font-size:18px;
}
.menulist .items .headeritem a:hover	{color:#51bbff;} 
.headerlogo {
float: left;
display: inline-block;
}
.companyname {
float: left;
font-size: 17px;
text-transform: uppercase;
margin: 0.3em 0 0 1em;
color: rgba(0, 0, 0, 0.3);
font-weight: 700;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.socialblock {
float: right;
padding: 1.2em 2em 0 1em;
}
.socialblock .socialicon {
width: 1.2em;
height: 1.2em;
margin: 0 0 0 2em;
}
.socialblock .socialicon i {
font-size: 22px;
color: rgba(0, 0, 0, 0.3);
position: absolute;
}
.socialblock .socialicon i{ 
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition:...

JavaScript

$(document).ready(function(){
 
//===== Apps slider script =====

    var angle = 0;

    $('.slider .slide:odd').css({
        "-webkit-transform": "rotateY(180deg)",
        "-moz-transform": "rotateY(180deg)",
        "-o-transform": "rotateY(180deg)",
        "-ms-transform": "rotateY(180deg)",
        "transform": "rotateY(180deg)"

       /* "-moz-transform": "scaleX(-1)",
        "-o-transform": "scaleX(-1)",
        "-webkit-transform": "scaleX(-1)",
        "-ms-transform": "scaleX(-1)",
        "transform": "scaleX(-1)"*/

    });

    function sliderResize(){
        if ($(window).width() <= 550) {
            $('.appsblock .apps .slider').css("min-height", $(window).width() + 100);
        }
    }

    $('.slider .navigation-right').click(function(){
        if ($(this).parent().find('.active').is(':last-child') == false) {
            angle = angle - 180;
            var angledeg = 'rotateY(' + angle + 'deg)';

            $(this).parent().find('.rotator').css({
                "-webkit-transform": angledeg,
                "-moz-transform": angledeg,
                "-o-transform": angledeg,
                "-ms-transform": angledeg,
                "transform": angledeg
            });
            $(this).parent().find('.active').next().toggleClass('active');
            $(this).parent().find('.active:first').toggleClass('active');

        }
    });

    $('.slider .navigation-left').click(function(){

        if ($(this).parent().find('.active').is(':first-child') == false) {
            angle = angle + 180;
            var angledeg = 'rotateY(' + angle + 'deg)';

            $(this).parent().find('.rotator').css({
                "-webkit-transform": angledeg,
                "-moz-transform": angledeg,
                "-o-transform": angledeg,
                "-ms-transform": angledeg,
                "transform": angledeg
            });
            $(this).parent().find('.active').prev().toggleClass('active');
           ...