JSFiddle - React, Tailwind, and code Playground
by Sergey khorev
HTML
<div class="grid">
<figure class="effect-steve">
<img src="https://skb44.ru/upload/iblock/f46/f462fd08adf7e617c9e35da826f7ed6f.jpg" alt="img01"/>
<figcaption>
<h2>дома <span>до двухсот м<sup>2</sup></span></h2>
<p>Проекты домов из клееного бруса до двухсот квадратных метров</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-steve">
<img src="https://skb44.ru/upload/iblock/f46/f462fd08adf7e617c9e35da826f7ed6f.jpg" alt="img01"/>
<figcaption>
<h2>дома <span>до двухсот м<sup>2</sup></span></h2>
<p>Проекты домов из клееного бруса до двухсот квадратных метров</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-steve">
<img src="https://skb44.ru/upload/iblock/f46/f462fd08adf7e617c9e35da826f7ed6f.jpg" alt="img01"/>
<figcaption>
<h2>дома <span>до двухсот м<sup>2</sup></span></h2>
<p>Проекты домов из клееного бруса до двухсот квадратных метров</p>
<a href="#">View more</a>
</figcaption>
</figure>
<!-- ... -->
</div>
<style>
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
section {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1920px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
/* Header */
.codrops-header {
margin: 0...