JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title> фотограф Ксенья Верещак </title>
        <link rel="stylesheet" type="text/css" href="mysite.css" />
    </head>
    <body>
        <div class="block1"> фотограф Ксения Верещак </div>
        <div class="block2">
            <a href="contacts.html"> Контакты </a>&nbsp;
            <a href="info.html"> Инфо </a>&nbsp;
            <a href="portfolio.html"> Портфолио </a>&nbsp;
        </div><br>
        <div class="block3">
            <div class="block4">
                <a href="1.html"><img src="1.jpg"></a>            
            </div>
            <div class="block4">
                <a href="1.html"><img src="2.jpg"></a>
            </div>
            <div class="block4">
                <a href="1.html"><img src="3.jpg"></a>
            </div>
            <div class="block4">
                <a href="1.html"><img src="anya.jpg"></a>
            </div>
        </div>
    </body>
</html>

CSS

body {
font-family: Century Gothic
}
.block1 {
    position: relative;
    padding-left: 200px;
    float: left;
    top: 70px;
}
.block2 {
    position: relative;
    padding-right: 200px;
    float: right;
    top: 70px;
}
.block3 {
    position: relative;
    margin: auto;
    width: 950px;
    top: 120px;
    bottom: 200px;
    box-shadow: 0px 0px 5px #CCC;
    -moz-box-shadow: 0px 0px 5px #ccc;
    -webkit-box-shadow: 0px 0px 5px #CCC;
    text-align: center;
}
.block4 {
    position: relative;
    margin: 10px;
    width: 280px;
    padding: 1px;
    border: 1px solid #D1D1D1;
    box-shadow: 1px 1px 5px #CCC;
    -moz-box-shadow: 1px 1px 5px #ccc;
    -webkit-box-shadow: 1px 1px 5px #CCC;
    text-align: center;
    float: left;
}
.block5 {
    position: relative;
    margin: auto;
    width: 650px;
    padding: 5px;
    text-align: center;
}
.block4:hover {
    opacity: 0.6;
}