JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>our team</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags('blink').length;i++){
s=document.all.tags('blink')[i];
s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';
}
}
}
</script>
</head>

<body>

<div class="container">
<div class="header">
</div><!-- end .header-->
<div class="content">

<div class="grid">
<div class="imgholder">
<img src="img/1.jpg"/>
</div>
<strong>Совет Директоров</strong>
<blink>В этом отделе есть вакантное место</blink>
<div class="meta"></div>
</div>

<div class="grid">
<div class="imgholder">
<img src="img/4.jpg" />
</div>
<strong>Отдел торговли.</strong>
<p>В этом отделе есть вакантное место</p>
<div class="meta"></div>
</div>

<div class="grid">
<div class="imgholder">
<img src="img/6.jpg" />
</div>
<strong>Бухгалтерия.</strong>
<p>В этом отделе есть вакантное место</p>
<div class="meta"></div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/3.jpg"/>
</div>
<strong>Отдел кадров</strong>
<p>В этом отделе есть вакантное место</p>
<div class="meta"></div>
</div>

<div class="grid">
<div class="imgholder">
<img src="img/3.jpg"/>
</div>
<strong>Отдел кадров</strong>
<p>В этом отделе есть вакантное место</p>
<div class="meta"></div>
</div>


<!-- end .content --></div>
<!-- end .container --></div>


</body>
</html>

CSS

@charset "windows-1251";
body {
margin:0;
padding:0;
background: url(img/2X.png);
color:#333;
font-family:Cambria, Georgia, serif;
font-size:15px;
overflow-x:hidden;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
header, section, footer, hgroup{
display:block;
}
a {
color:#35BFFF;
text-decoration:none;
}
.container {
position:relative;
width:980px;
margin:0 auto;
padding-bottom: 10px;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);

-webkit-transition: top 1s ease, left 1s ease;
-moz-transition: top 1s ease, left 1s ease;
-o-transition: top 1s ease, left 1s ease;
-ms-transition: top 1s ease, left 1s ease;
}
.content {
width: 970px;
right: auto;
margin: 5px;
float: left;
}
.grid{
width:200px;
min-height:100px;
padding: 15px;
background:#fff;
margin:5px;
font-size:12px;
float:left;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);

-webkit-transition: top 1s ease, left 1s ease;
-moz-transition: top 1s ease, left 1s ease;
-o-transition: top 1s ease, left 1s ease;
-ms-transition: top 1s ease, left 1s ease;
}
.grid strong {
border-bottom:1px solid #ccc;
margin:10px 0;
display:block;
padding:0 0 5px;
font-size:17px;
}
.grid .meta{
text-align:right;
color:#777;
font-style:italic;
}
.grid .imgholder img{
max-width:100%;
background:#ccc;
display:block;
}
@media screen and (max-width : 1240px) {
body{
overflow:auto;
}
}
@media screen and (max-width : 900px) {


@charset "windows-1251";
body {
margin:0;
padding:0;
background: url(img/2X.png);
color:#333;
font-family:Cambria, Georgia, serif;
font-size:15px;
overflow-x:hidden;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
header, section, footer, hgroup{
display:block;
}
a...