JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Samorząd Uczniowski</title>
    
    <link rel="stylesheet" href="reset.css" type="text/css">
    <link rel="stylesheet" href="styl.css" type="text/css">
    <link rel="stylesheet" href="fontello-baa39c69/css/fontello.css" type="text/css" />
        
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>

<body>
    <!-- *********  Main part – headline ********** -->
     
        
        <!-- *********  Content  ********** -->
        
        <div id="content_inner">
            
           
        <?php
          $conn = new mysqli("serwer", "użytkownik", "hasło", "baza danych");
          
          $result = $conn->query("SELECT * FROM posts ORDER BY id DESC");
          while ($row = $result->fetch_assoc()) {
            ?>
            <div class="single-post">
            
            <div class="post-header">
                
                <div class="post-naglowek"><?php echo $row['title']; ?></div>
                
                <div class="post-info">
                    
                    <div class="posted-on"><i class="icon-calendar"><?php echo $row['created_at']; ?></i></div><div class="sepator">|</div> 
                    <div class="kategoria"><i class="icon-folder-open"><?php echo $row['category']; ?></i></div><div class="sepator">|</div> 
                    <div class="autor"><i class="icon-user"><?php echo $row['AUTHOR']; ?></i></div>
            
                </div>
                
                <div class="post-content">
                    
                    <div class="kolumna-ze-zdjeciem"><img src="<?php echo $row['image']; ?>" style="vertical-align: middle;"></div>
                    <div class="kolumna-z-tekstem"><?php echo $row['content']; ?></div>
                
                </div>
                
            </div> 
            
        </div>
...

CSS

html {
	height: 100%;
}
body {
	font-family: 'Source Sans Pro', sans-serif;
}
@font-face {
	font-family: "linecons";
	src: url('fonts/linecons.eot');
	src: url('fonts/linecons.eot?#iefix') format('eot'), url('fonts/linecons.woff') format('woff'), url('fonts/linecons.ttf') format('truetype'), url('fonts/linecons.svg#linecons') format('svg');
	font-weight: normal;
	font-style: normal;
}
h3 {
	font-size: 180%;
	font-weight: 300;
	margin: 46px 0 30px 10px;
}
h4 {
	font-size: 120%;
	font-weight: 400;
	color: #fff;
}
a {
	color: #e66e0d;
}
p a {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
a:hover {
	color: #000;
}
a.button_dark, a.button_light {
	background-color: #e66e0d;
	display: block;
	width: 90px;
	padding: 15px 30px 0 30px;
	height: 33px;
	text-align: center;
	margin: auto;
	z-index: 2;
	position: relative;
	color: #fff;
	font-size: 11pt;
	font-weight: 400;
	text-decoration: none;
	letter-spacing: 1px;
	text-shadow: 0px 1px #d72d05;
	border: 5px solid rgba(0, 0, 0, .2);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	box-shadow: inset 0px 1px #f08715;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
a.button_light {
	margin-left: 10px;
	width: 100px;
	border: 5px solid #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	box-shadow: 0px 0px 0px 1px #dbdbdb;
}
a:hover.button_dark, a:hover._button_light {
	background-color: #d76203;
	text-shadow: 0px -1px #a70d00;
	border: 5px solid rgba(0, 0, 0, .4);
	-webkit-background-clip: padding-box;
	/* for Safari */
	background-clip: padding-box;
	box-shadow: inset 0px 1px 2px #c14d00;
}
a:hover.button_light {
	background-color: #d76203;
	border: 5px solid #f5f5f5;
	box-shadow: 0px...